vue.js 2の入力タイプのテキストに演算子の三項式を追加するにはどうすればよいですか？このような

Question

マイ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> 

私は入力タイプテキストに条件を追加したいです。コードが実行された場合、私はコード

上記のようなオペレータの三元を使用し、それが

誤りがないと動作しません。だから私は混乱している、それはたぶん私のコードは依然として正しくない

解決するために

は、私はそれをどのように解決することができますか？

Answer 1

問題は、プレーンHTML内でJavaScript式を使用しようとしていることです。これは動作しません。

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

をしたり、式に依存し、あなたの計算プロパティを返します計算されたプロパティにバインド：

あなたは、このように手動で各属性をバインドすることができます。 （this is possible also）の代わりに、あなたは多くのプロパティに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 
 
     \t 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>