vue 局部刷新某个data元素

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/haeasringnar/article/details/83240696

<template>
<div class="icontent">
    <div class="one_question" v-for="question in question_datas">
	<div v-for="u_answer in question.answer_detail">
		<div class="new_answer_txt">
		    <p>{{u_answer.answer_content}}</p>
		    <p>{{u_answer.translate_txt}}</p>
		</div>
		<div class="user_translate" @click="translate_answer(u_answer,u_answer.answer_content)">翻译</div>
	</div>
    </div>
</div>
</template>

<script>
    import axios from 'axios'
    import $ from 'jquery'
    import Vue from 'vue'
    import { getgroupquestion } from '@/api/course'
    import store from '@/store'

    export default {
        name: "questions",
        data () {
            return {
                question_datas: [],
                question_datas_length: 0,
		course_id: 0
            }
        },
        methods: {
            getgroupquestioninfo (course_id) {
                getgroupquestion(course_id).then(response => {
                    var data = response.data
                    this.question_datas = data
                    this.question_datas_length = data.length
                    for (var index in this.question_datas) {
                        this.question_datas[index].translate_txt = ''
                        for (var index2 in this.question_datas[index].answer_detail) {
                            (this.question_datas[index].answer_detail)[index2].translate_txt = ''
                        }
                    }
                }).catch(error => {
                    console.log(error)
                    this.question_datas = []
                    this.question_datas_length = 0
                })
            },
            translate_answer (u_answer,answer_content) {
                console.log(u_answer.translate_txt)
                var lang = 'zh'
                for (var index in answer_content) {
                    if (escape(answer_content[index]).indexOf("%u") === 0) {
                        var lang = 'en'
                        break
                    }
                }
                if (u_answer.translate_txt === '') {
                    posttranslate(answer_content,lang).then(response => {
                        var data = response.data
                        u_answer.translate_txt = data.translation
                        this.question_datas = Object.assign({}, this.question_datas)
                    }).catch(error => {
                        console.log(error)
                    })
                    // u_answer.translate_txt = '我是翻译'
                    // console.log('ok')
                    
                } else {
                    u_answer.translate_txt = ''
                    this.question_datas = Object.assign({}, this.question_datas)
                }
            }
        },
        created: function() {
            this.course_id = store.state.course_id
            this.getgroupquestioninfo(this.course_id)
        },
    }
</script>

<style scoped>
   
</style>

本例子的适用场景是：有很多问题question_datas 是从后端请求来的，并且里面含有很多对应的回答，然后需要对这些回答进行翻译。因此在用户点击某个回答下面的翻译时，就会局部的刷新当前点击的dom，将它的回答内容翻译好后，展示在页面。