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

如何在vue.js 2上的输入类型文本中添加运算符三元组？

1 个答案: