我构建了以下组件:
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标签的内容。
答案 0 :(得分:2)
根据我的理解,Snippetlink属性可用于保存来自服务器的数据。
self.Snippetlink = response.data.hash;
并将Snippetlink传递给代码段模型的链接属性
<snippet-modal :link="Snippetlink"></snippet-modal>
答案 1 :(得分:0)
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>