vue.js 2의 입력 유형 텍스트에 연산자 3진수를 추가하려면 어떻게 해야 합니까?

vue.js 2의 입력 유형 텍스트에 연산자 3진수를 추가하려면 어떻게 해야 합니까?

내 vue 컴포넌트는 다음과 같습니다.

<template>
    <div>
        ...
            <li v-for="category in categories">
                ...
                    <input type="radio" class="category-radio" :value="category.id" (category.id == categoryId) ? 'checked data-waschecked=true' : ''> 
                ...
            </li>
        ...
    </div>
</template>
<script>
    export default {
        props: ['categories', 'categoryId'],
    }
</script>

입력 유형 텍스트에 조건을 추가하고 싶습니다.위 코드와 같은 연산자 3진법을 사용한다.

코드가 실행되면 동작하지 않습니다.

에러는 없습니다.그래서 나는 그것을 해결하기 혼란스럽다.

내 코드가 아직 틀렸나 봐

어떻게 하면 해결할 수 있을까요?

문제는 일반 HTML에서 JavaScript 식을 사용하려고 한다는 것입니다. 이 방법은 작동하지 않습니다.

다음과 같이 각 속성을 수동으로 바인드할 수 있습니다.

:checked="(expression) ? true : false" 

또는 표현식에 따라 계산된 속성에 바인딩하여 계산된 속성을 반환합니다.또는 오브젝트를 1에서 여러 속성으로 바인드하고 오브젝트 전체를 한 번에 바인드할 수도 있습니다(이것도 가능합니다).

new Vue({
  el: '#app',
  data: {
    categories: [
      { id: 1, name: 'one' },
      { id: 2, name: 'two' },
      { id: 3, name: 'three' }
    ],
    selectedId: 2 // for simplicity
  },
  computed: {
    attrs: function() {
      return function(id) { // computed can also return a function, so you can use args
      	return (id === this.selectedId) ? { checked: true, 'data-waschecked': true } : {}
      }
    }
  },
  mounted() { // log your element
    console.log(document.querySelector('input[data-waschecked=true]'))
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="category in categories">
      <input type="checkbox" v-bind="attrs(category.id)">
    </li>
  </ul>
</div>

언급URL : https://stackoverflow.com/questions/45136453/how-can-i-add-operator-ternary-in-input-type-text-on-vue-js-2