如何在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）：

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>