Vuejs, как передать данные в качестве опоры для дочернего компонента

Question

Я строю следующий компонент:

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

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

    props: [
        'link'
    ],

});

И я хотел бы динамически изменить данные ссылки после того, как я успешно отправил сообщение Axios.

Мой пример

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-модели

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

Во-вторых, чтобы передать данные в качестве реквизита дочернему компоненту, необходимо указать имя реквизита, а также передаваемый ключ данных. Например, чтобы передать ваш компонент link в качестве опоры с тем же именем snippet-modal компонент, вам нужно: <snippet-modal :link="link"></snippet-modal>