Question

我是VueJS的新手，我想在onclick上更新数据。这是我的代码：

<div id="elementApp">
  <div class="element">{{ message }}</div>
  <button class="button" v-on:click="nextElement()">Next data</button>
</div>

var tempData = [
  {
    message: "A"
  },
  {
    message: "B"
  },
  {
    message: "C"
  }
];

var counter = 0;

var app = new Vue({

  el: '#elementApp',

  data:  tempData[counter],

  methods: {

    nextElement: function () {

      counter += 1;

      this.tempData = tempData[counter];

    }

  }

});

我发现这个答案接近我想要的但却无法改变它：VueJS how to update data on selection

我无法看到我的错误......方法是错误的做法吗？

Answer 1

这种方法应该有效：

this.listView1.View = View.Details;
this.listView1.HeaderStyle = ColumnHeaderStyle.None;
this.listView1.FullRowSelect = true;
this.listView1.Columns.Add("", -2);
this.listView1.Items.Add("Something");
this.listView1.Items.Add("Something else").BackColor = Color.Red;

这样做，每次迭代的var tempData = [ { message: "A" }, { message: "B" }, { message: "C" } ]; var counter = 0; var app = new Vue({ el: '#elementApp', data: { message: tempData[counter].message }, methods: { nextElement: function () { counter += 1; //that's just to make it safer over the tempData size if(counter>=tempData.length) counter = 0; this.message = tempData[counter].message; } } });函数都会更新组件的被动数据的属性nextElement。

希望它有所帮助。

Here你也找到了小提琴。

如何从vue.js方法访问数据？

1 个答案: