使用 Vue.js 附加 HTML 元素

所以我对此真的很陌生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应该保存所有数据，然后我应该像我一样循环它，但是一旦获得数据我如何再次触发它？

编辑：只是为了澄清一下，我不是在问有关“this”和“self”的问题，我是在问如何将此数据附加到某些 HTML 元素上

编辑：只是为了澄清一下，我不是在问有关“this”和“self”的问题，我是在问如何将此数据附加到某些 HTML 元素上

您可能没有用这些具体的话来询问，但它们是做您想做的事情的关键。

你的代码是so关闭，你只需要了解 JavaScript 的变量作用域即可。线路test = response.data;所写的基本上什么也没做 -test只存在于你的内部function (response) {}堵塞。它不存在于其外部，因此组件的其余部分看不到它。

通过正确设置this.test: (the .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 以适应该数据。