使用Vue.js追加HTML元素

Question

所以我真的是这个Vue.js的新手，我试图实现的很简单，我试图将这个Ajax请求的结果附加到我的列表中

<div id="app">
<button v-on:click="buttonClick">Test</button>
<ul id="example-1">
<li v-for="t in test">
{{ t }}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
'message': 'hello world',
'test': null
},
methods: {
buttonClick: function() {
axios.get('api/getdata')
.then(function(response) {
test = response.data;
//if this was Jquery I'd use $('li').append here
})
.catch(function(error) {
});
}
}
})
</script>

现在的问题是，我不知道如何做到这一点，我的变量test应该保存所有数据，然后我应该像以前一样循环它，但一旦我得到数据，我如何再次触发它？

编辑：只是澄清一下，我不是在问关于"这个"one_answers"自我"的问题，我是在问如何将这些数据添加到一些HTML元素上

Answer 1

EDIT：为了澄清，我不是在问关于"this"one_answers"self"的问题，我是在问如何将这些数据添加到一些HTML元素上

你可能没有问过这些特定的词，但它们是做你想做的事情的关键。

您的代码是，所以关闭，您只需要了解JavaScript的变量范围。写入的行test = response.data;基本上什么都不做——test只存在于function (response) {}块中。它不存在于它之外，因此组件的其他部分看不到它

通过正确设置this.test：(此处.bind(this)至关重要)

axios.get('api/getdata')
.then(function (response) {
this.test = response.data;
}.bind(this))
.catch(function (error) {
});

test将可用于您的模板，并且此位将正常工作：

<ul id="example-1">
<li v-for="t in test">
{{ t }}
</li>
</ul>

(当然，假设response.data是你所期望的。)

使用Vue的一个要点是，您永远不会像在jQuery中那样对HTML进行原始附加。相反，您在组件中设置数据，然后组件自动调整其HTML以适应该数据。

Answer 2

您需要引用当前实例来设置test。以下内容适用于您：

methods: {
buttonClick: function() {
var self = this;
axios.get('api/getdata')
.then(function (response) {
self.test = response.data;
})
.catch(function (error) {
});
}
}

关于this如何工作的一些好信息：

"；这个"；关键词工作？

Answer 3

也许是因为您习惯于使用像jQuery这样的库，所以您正在考虑向DOM添加一些内容。Vue是数据驱动的，所以如果你有一个像你的列表。。。

<ul>
<li v-for="t in test">
{{ t }}
</li>
</ul>

你的财产就像。。。

data: {
test: []
}

如果你要做这样的事。。。

this.test.push('list-item-1');
this.test.push('list-item-2');

由于在您更新test数组时，数据已经用v-for绑定到您的列表中，因此将向您的列表添加一个或多个项目。你不需要附加任何内容。Vue会随着test的值的变化而动态地监视和更改列表。