Question

我有一个Vue页面，可从数据库中加载一堆actions。然后，它使用action创建一个表，其中包含从v-for获得的一些数据。

这是我的问题：在一个表行中，我需要一个v-model属于属性action.weekly的复选框。理想情况下，它将是一个布尔值。但是我的数据库中有许多action条目没有weekly属性。在这种情况下，我需要选中该复选框，就像它是真的一样。通常，我会在此处使用计算属性，但是您无法将参数传递给计算属性，因此我不知道如何告诉vue要查看哪个action（我无法传递{{1 }}进入计算属性，就像我在下面使用$event, ndx所做的那样。）

这是我的表格代码：

handleEnableChanged()

在<tbody> <tr v-for="(action, ndx) in actions" > <td class="pointer" @click='openModalCard(action, ndx)'> {{action.name}} </td> <input type="checkbox" v-model="action.weekly??" @change="handleEnableChanged($event, ndx)"/> </td> <input type="checkbox" v-model="action.enabled" @change="handleEnableChanged($event, ndx)"> </td> </tr> </tbody>没有action属性的情况下，我希望选中该复选框，就像它是true一样。我该怎么做？

如果有更好的方法可以解决此问题，请告诉我。我仍然是vue.js的新手。

Answer 1

我认为最简单的方法是使用v-if和v-else。话虽如此，我还提供了一个示例，说明如何在没有v-if和{ {1}} ..

使用v-else和v-if：

v-else

new Vue({
  el: "#root",
  data: {
    actions: [
        {
          name: "first",
          weekly: true,
          enabled: false
        },
        {
          name: "second",
          enabled: false
        },
        {
          name: "third",
          weekly: true,
          enabled: true
        },
        {
          name: "fourth",
          enabled: true
        }
      ]
  },
  template: `
<tbody>
  <tr v-for="(action, ndx) in actions" >
    <td class="pointer" @click='console.log(action, ndx)'>{{action.name}}</td>
    <input v-if="'weekly' in action" type="checkbox" v-model="action.weekly" @change="handleEnableChanged($event, ndx)"/>
    <input v-else type="checkbox" checked="true" @change="handleEnableChanged($event, ndx)"/>
    </td>
    <input type="checkbox" v-model="action.enabled" @change="handleEnableChanged($event, ndx)">
    </td>
  </tr>
</tbody>
  `,
  methods: {
    handleEnableChanged(evt, ndx) {
      console.log(evt, ndx);
    },
  }
});

没有<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> <div id="root"></div>和v-if：

v-else

new Vue({
  el: "#root",
  data: {
    actions: ""
  },
  template: `
<tbody>
  <tr v-for="(action, ndx) in actions" >
    <td class="pointer" @click='console.log(action, ndx)'>{{action.name}}</td>
    <input type="checkbox" v-model="action.weekly" @change="handleEnableChanged($event, ndx)"/>
    </td>
    <input type="checkbox" v-model="action.enabled" @change="handleEnableChanged($event, ndx)">
    </td>
  </tr>
</tbody>
  `,
  methods: {
    handleEnableChanged(evt, ndx) {
      console.log(evt, ndx);
    },
    getActions() {
      let originalActions = [
        {
          name: "first",
          weekly: true,
          enabled: false
        },
        {
          name: "second",
          enabled: false
        },
        {
          name: "third",
          weekly: true,
          enabled: true
        },
        {
          name: "fourth",
          enabled: true
        }
      ];
      this.actions = originalActions.map(a => { 
        return {
          name: a.name,
          weekly: 'weekly' in a ? a.weekly : true,
          enabled: a.enabled
        }
      })
    }
  },
  created() {
    this.getActions();
  }
});

Answer 2

如果您希望数组中的所有项目都具有action.weekly属性，请在最初检索数据时对其进行更新。然后，您可以将v-model="action.weekly"用于数组中的所有项目。

this.newArray = this.oldArray.map(item => {
  if(!item.hasOwnProperty('weekly')){
    item.weekly = true;
  }
  return item
})

Answer 3

您可以这样做：

<input type="checkbox" :checked="!!action.weekly">

如果值不是未定义或为空，则!!运算符将返回true

Vue，js，使用v模型计算属性？

3 个答案: