Vue.js 函数回调中的内容未正确显示 [英] The content not shown properly in function callback in Vue.js
问题描述
我有两个问题.首先是我无法正确渲染星星.如果我更改 data()
函数中的值,我可以这样做,但是如果我想以函数回调的方式进行,它不起作用(请参阅下面的评论).这里出了什么问题?和Vue的生命周期有关系吗?
第二个是我要提交star-rate和textarea的内容,当我刷新页面时,内容应该在页面上呈现并替换<textarea></textarea>
我该怎么办?
我想在这里制作一个 JSFiddle,但我不知道如何在 Vue 的单文件组件中制作它,非常感谢您的帮助.
<ul class="list-wrap"><li><span class="comment-label">rateA</span><star-rating :data="dimensionA"></star-rating><div><h4 class="title">评论</h4><textarea class="content" v-model="content"></textarea><mt-button type="primary" class="mt-button">提交</mt-button>
</模板><脚本>从'components/starRating'导入starRating从服务/数据服务"导入数据服务导出默认{数据 () {返回 {维度A:''//如果我改变了这里的值,星星渲染得很好.}},成分: {星级},方法: {获取评论(ID){返回 dataService.getOrderCommentList(id).then(data => {this.dimensionA = 1})}},创建(){this.getComment(1)//不工作}}
this
的范围似乎在您的 getComment
方法中不正确,您需要进行更改,例如以下:
方法:{获取评论(ID){var self = this;dataService.getOrderCommentList(id).then(data => {self.dimensionA = 1})}},
<小时>
由于您想替换 并呈现内容(如果存在),您可以使用 v-if 对此,如果内容可用- 显示内容,否则显示
<h4 class="title">评论</h4><span v-if="content> {{content}} </span><textarea v-else class="content" v-model="content"></textarea>
查看工作小提琴此处.
<小时>我在您的代码中观察到的另一个问题是您使用的是动态道具,但是您最初将道具分配给了 star-rating
组件中的数据变量 value
,但您没有检查道具中的未来变化.解决此问题的一种方法,假设您对 value
变量还有其他用法,请遵循 观看:
观看:{数据:函数(新值){this.value = newVal}}
查看更新的fiddle.
I've got two problems here. The first is that I can't get the star rendered properly. I can do it if I change the value in the data()
function but if I want to do it in a function callback way, it doesn't work (see comments below). What's going wrong here? Does it have something to do with Vue's lifecycle?
The second one is that I want to submit the star-rate and the content of the textarea and when I refresh the page, the content should be rendered on the page and replace the <textarea></textarea>
what can I do?
I want to make a JSFiddle here but I don't know how to make it in Vue's single-file component, really appreciate your help.
<div class="order-comment">
<ul class="list-wrap">
<li>
<span class="comment-label">rateA</span>
<star-rating :data="dimensionA"></star-rating>
</li>
</ul>
<div>
<h4 class="title">comment</h4>
<textarea class="content" v-model="content">
</textarea>
</div>
<mt-button type="primary" class="mt-button">submit</mt-button>
</div>
</template>
<script>
import starRating from 'components/starRating'
import dataService from 'services/dataService'
export default {
data () {
return {
dimensionA: '' //if I changed the value here the star rendered just fine.
}
},
components: {
starRating
},
methods: {
getComment (id) {
return dataService.getOrderCommentList(id).then(data => {
this.dimensionA = 1
})
}
},
created () {
this.getComment(1) // not working
}
}
</script>
What it seems is scope of this
is not correct in your getComment
method, you need changes like following:
methods: {
getComment (id) {
var self = this;
dataService.getOrderCommentList(id).then(data => {
self.dimensionA = 1
})
}
},
As you want to replace the <textarea>
and render the content if present, you can use v-if for this, if content if available- show content else show <textarea>
<div>
<h4 class="title">comment</h4>
<span v-if="content> {{content}} </span>
<textarea v-else class="content" v-model="content">
</textarea>
</div>
See working fiddle here.
one more problem I have observed in your code is you are using dynamic props, but you have assigned the prop initially to the data variable value
in star-rating
component, but you are not checking future changes in the prop. One way to solve this, assuming you have some other usage of value
variable is putting following watch:
watch:{
data: function(newVal){
this.value = newVal
}
}
see updated fiddle.
这篇关于Vue.js 函数回调中的内容未正确显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!