Question

在以下示例中，在单击“添加”按钮之前或之后，似乎都没有呈现任何与v-if相关的div。当比萨饼JSON对象更新时，Vue.js似乎没有运行任何更新。

是否有解决此问题的方法而无需将pizzas变量更改为数组？

<div id="app">
  <div v-for="pizza in pizzas">
    {{ pizza }}
  </div>
  <div v-if="totalPizzas === 0">
    No pizza. :(
  </div>
  <div v-if="totalPizzas > 0">
    Finally, some pizza! :D
  </div>
  <button @click="add">Add</button>
</div>

var app = new Vue({
  el: '#app',
  data: {
    pizzas: {}
  },
  methods: {
    add: function() {
      this.pizzas['pepperoni'] = { size: 16, toppings: [ 'pepperoni', 'cheese' ] };
      this.pizzas['meaty madness'] = { size: 14, toppings: [ 'meatballs', 'sausage', 'cajun chicken', 'pepperoni' ] };
    },
    totalPizzas: function() {
      return Object.keys(this.pizzas).length;
    }
  }
});

Answer 1

您的代码中有几项需要改进的地方。他们中的大多数是关于语法的。例如，应该调用方法，但可以直接查询计算属性：这就是为什么它是@click="add()"，但totalPizzas === 0只有在它是计算属性时才有意义。

然而，要理解的关键是how reactivity works in VueJS。当您更改对象内部时，请参阅向其添加新属性，VueJS无法检测到此更改。引用文档：

Vue不允许动态添加新的根级反应已创建实例的属性。但是，有可能使用Vue.set(object, key, value)方法将反应属性添加到嵌套对象：

Vue.set(vm.someObject, 'b', 2)

您还可以使用vm.$set实例方法，该方法是。的别名全球Vue.set：

this.$set(this.someObject, 'b', 2)

有时您可能希望为现有属性分配许多属性对象，例如使用Object.assign()或_.extend()。 然而，新的添加到对象的属性不会触发更改。在此类中例如，使用原始属性创建一个新对象 object和mixin对象：

// instead of `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

这就是它的工作方式：

var app = new Vue({
  el: '#app',
  data: {
    pizzas: {}
  },
  computed: {
    totalPizzas: function() {
      return Object.keys(this.pizzas).length;
    }
  },
  methods: {
    add: function() {
      this.pizzas = Object.assign({}, this.pizzas, {
        pepperoni: { size: 16, toppings: [ 'pepperoni', 'cheese' ] },
        ['meaty madness']: { size: 14, toppings: [ 'meatballs', 'sausage', 'cajun chicken', 'pepperoni' ] }
      });
    },
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<div id="app">
  <div v-for="pizza in pizzas">
    Size: {{ pizza.size }} inches
    Toppings: {{ pizza.toppings.join(' and ') }}
  </div>
  <div v-if="totalPizzas === 0">
    No pizza. :(
  </div>
  <div v-if="totalPizzas > 0">
    Finally, some pizza! :D
  </div>
  <button @click="add()">Add</button>
</div>

JSON和v-if与Vue.js有关

1 个答案: