使用 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 元素上

原文由 Tomislav Nikolic 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 以适应该数据。

原文由 ceejayoz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

        });
    }
}

有关 this 工作原理的一些有用信息：

“this”关键字是如何工作的？

原文由 Eric G 发布，翻译遵循 CC BY-SA 4.0 许可协议