使用 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应该保存所有数据，然后我应该像我一样循环它，但是一旦我得到数据，我如何再次触发它？

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

Answer 1

编辑：澄清一下，我不是在问关于“this”和“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 以适应该数据。