vueローカルリフレッシュdata要素
3124 ワード
{{u_answer.answer_content}}
{{u_answer.translate_txt}}
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)
},
}
この例の適用シーンは、多くの問題question_です.Datasはバックエンドからリクエストされ,対応する回答が多く含まれており,これらの回答を翻訳する必要がある.したがって,ユーザがある回答の下の翻訳をクリックすると,現在クリックしているdomが局所的にリフレッシュされ,その回答内容が翻訳された後,ページに表示される.