Question

我仍在学习vue的基础知识。我在一个组件中有不同的元素，必须在第二个组件中进行分配。当我使用console.log时，数组可以正确显示，但是当我想在模板中动态显示数组时，它仍然是默认值。我在做什么错了？

组件一：

    <template>
    <div>
{{nr}}
{{containertyp}}
      <button  @click="click(0)"></button>
</div>
     </template>

我还有更多具有不同参数的按钮，只是为了使它在此处更短。

export default: {
data: function {
return {
nr: [],
containertyp: [],
    }
    }
methods: {
  click(number) {

    for (var i = 0; i < 27; i++) {
      this.nr[i] = false;
      if (number == i) {
        this.nr[i] = true;
      }
    };

    EventBus.$emit('containerclicked');

  }
},
created: function() {
  let i;
  //default
  for (i = 0; i < 27; i++) {
    this.nr[i] = false; 
  }
  for (var index = 0; index < 27; index++) {
    this.containertyp[index] = 'bs';
  }
},
mounted() {

  const self = this
  EventBus.$on('containertypchosen', function (containertyp) {
    for (let j = 0; j < 27; j++) {
      if (self.nr[j] == true) {
        self.containertyp[j] = containertyp
      }
    }
  })

第二部分：

<template>
<div>
<button :disabled = "disabled == true"  v-on:click="chosetype('bs')" "> bs </button> <br />
</div>
</template>
export default: {
data: function() {
return {
disabled: true
}
}
     mounted () {
    const self = this
    EventBus.$on('containerclicked', function (){
      self.disabled = false

    })
  },
methods: {
chosetype: function (containertyp) {
      this.containertyp = containertyp
      EventBus.$emit('containertypchosen', containertyp)
    }

    }
}

Answer 1

您不能使用索引更新数组，反应系统不会检测到更改。

https://vuejs.org/v2/guide/list.html#Caveats

例如，这将不起作用：

this.nr[i] = true;

相反，您需要使用Vue.set或别名vm.$set：

this.$set(this.nr, i, true);

一种替代方法是创建一个新数组，然后完全替换this.nr，即this.nr = newArray。

在通过索引更新数组的所有地方都需要进行类似的更改。当前存在此问题的nr和containertyp的更新。

尚不清楚您的代码是否nr甚至需要是一个数组。似乎所有的值都与false相距一个，所以您最好保留true值的索引而不是使用数组。

Vue：阵列仅在控制台上更新，而不在屏幕上更新

1 个答案: