使用 Vue.js 附加 HTML 元素 [英] Appending HTML elements with Vue.js

问题描述

所以我对这个 Vue.js 真的很陌生，我想要实现的目标很简单，我试图将这个 Ajax 请求的结果附加到我的列表

<button v-on:click="buttonClick">测试</button><ul id="example-1"><li v-for="t in test">{{ t }}
<脚本>var app = new Vue({el: '#app',数据: {'message': '你好世界','测试':空},方法: {按钮点击:函数(){axios.get('api/getdata').then(功能(响应){测试 = response.data;//如果这是 Jquery 我会在这里使用 $('li').append}).catch(函数(错误){});}}})

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

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

解决方案

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

您可能没有用这些特定的话来提问，但它们是做您想做的事的关键.

您的代码非常，您只需要了解 JavaScript 的变量范围.所写的行 test = response.data; 基本上什么都不做 - test 只存在于您的 function (response) {} 块中.它不存在于它之外，因此组件的其余部分无法看到它.

通过正确设置this.test:(.bind(this)在这里很关键)

axios.get('api/getdata').then(功能(响应){this.test = response.data;}.bind(this)).catch(函数(错误){});

... test 将可用于您的模板，这部分将正常工作:

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

(当然，假设 response.data 是您期望的那样.)

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

So I am really new to this Vue.js and what I am trying to achieve is simple, I am trying to append the results of this Ajax request into my list

<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>

Now the problem is I don't know how to do it, my variable test should hold all the data and then I should just loop it as I did, but how I trigger it again once I got the data?

EDIT: Just to clarify, I am not asking question about "this" and "self" I am asking on how to APPEND this data onto some HTML element

解决方案

EDIT: Just to clarify, I am not asking question about "this" and "self" I am asking on how to APPEND this data onto some HTML element

You may not have asked in those specific words, but they're key to doing what you want to do.

Your code is so close, you just need to understand JavaScript's variable scope. The line test = response.data; as-written is doing basically nothing - test only exists within your function (response) {} block. It doesn't exist outside it, and as such the rest of the component can't see it.

By properly setting this.test: (the .bind(this) is critical here)

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

});

... test will become available to your template, and this bit will work as it should:

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

(Assuming response.data is what you expect it to be, of course.)

One of the major points of using Vue is that you're never doing raw appends of HTML like you'd do in jQuery. Instead, you set data in the component, and the component adjusts its HTML automatically to fit that data.

这篇关于使用 Vue.js 附加 HTML 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！