Vue,js, 用 v-model 计算属性？

Question

我有一个 vue 页面，它从数据库中加载了一堆 actions。然后它使用 v-for.

使用从 action 获得的一些数据创建一个 table

这是我的问题：在 table 行之一中，我需要一个 v-model 属性 action.weekly 的复选框。理想情况下，它将是一个布尔值。但是我的数据库中有一堆 action 条目没有 weekly 属性。在那些情况下，我需要选中复选框，就好像它是真的一样。通常，我会在这里使用计算属性，但是你不能将参数传递给计算属性，所以我不知道如何告诉 vue 要查看哪个 action（我不能将 $event, ndx 传递给计算的属性就像我在下面使用 handleEnableChanged() 所做的那样）。

这是我的 table:

代码

<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 没有 weekly 属性的情况下，我希望复选框被选中，就好像它是真的一样。我怎样才能做到这一点？

如果有更好的方法来解决这个问题，请告诉我。 vue.js.

我还是新手

Answer 1

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

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

Answer 2

你可以这样做：

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

如果值不是未定义或空值，!! 运算符将 return true

Answer 3

我认为为此使用 v-if 和 v-else 最简单。话虽如此，我还提供了一个示例，说明如何在没有 v-if 的情况下处理此问题和 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();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="root"></div>

Vue,js, 用 v-model 计算 属性？

Vue,js, Computing a property with v-model?

vue.js

v-for

v-model

Vue,js, 用 v-model 计算属性？