Question

我构建了以下组件：

var Modal = Vue.component('modal', {

    template: `
        <div id="modal" class="modal">
            <div class="modal-content">
                <p>{{ link }}</p>
            </div>
        </div>
    `,

    props: [
        'link'
    ],

});

我想在成功发送axios post之后动态更改链接数据。

我的vue实例

new Vue({

    el: '#form',

    components: {
        'modal': Modal
    },

    data: {
        userId: '',
        title: '',
        body: '',
        snippetLink: '',
    },

    methods: {

        publish (e) {
            var self = this;
            axios.post('/snippets',  {
                title: this.title,
                body: this.content,
            })
            .then(function (response) {
                console.log("success");
                self.link = response.data.hash; // Here I tried to add the reponse content to the vue component's p
            })
            .catch(function (error) {
              console.log(error);
            })
        },

我的Html标记：

        <modal link=""></modal>
       ...
        <button type="button"                      
                   v-bind:class="{ 'modal-trigger': !isActiveModal }"
                   @click="publish">Publish
                   <i class="material-icons right">send</i>
        </button>

所以我成功地向我的服务器发送了一个axios帖子并获取了数据，我想打开一个模态窗口并将数据放入ap标签，到目前为止我的帖子后弹出模态，但我不确定我的它不会改变p标签的内容。

Answer 1

根据我的理解，Snippetlink属性可用于保存来自服务器的数据。

self.Snippetlink = response.data.hash;

并将Snippetlink传递给代码段模型的链接属性

 <snippet-modal :link="Snippetlink"></snippet-modal>

Answer 2

rupesh_padhye的回答是正确的。这只是一个进一步的解释。

首先，要将响应数据存储到Vue组件，您需要首先在data中为此目的定义一个键。因此，要使此行有效：self.link = response.data.hash;，您需要添加link作为Vue组件数据的键：

data: {
        userId: '',
        title: '',
        body: '',
        snippetLink: '',
        link: ''
    },

如果您的意思是snippetLink，请将该行更改为self.snippetLink = response.data.hash;

其次，要将数据作为prop传递给子组件，您必须指定prop名称以及传递的数据键。例如，要将组件的link作为具有相同名称的道具传递给snippet-modal组件，您需要：<snippet-modal :link="link"></snippet-modal>

Vuejs如何将数据作为prop传递给子组件

2 个答案: