在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我的vue有个from属性
var handle=new Vue(
"el": "#el",
"from": [1,2]
我只要handle.from=[3,4];重新赋值就可以使视图重新渲染吗？
我要用新数组替换掉旧数组怎么写呢
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
from从1改为1，值没有改变，不会导致页面重新渲染。如果想强制渲染，可以调用handle.$forceUpdate()实现。
呃，既然你改了问题描述，那我重新补充下吧：
handle.$set(handle.$data,"from",[3,4]);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
$set赋值更新视图。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这是关于数组更新检测的问题..官方文档有详细说的数组更新检测
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：18被浏览9837分享邀请回答// import Vue from 'vue'
import Vuex from 'vuex'
import { merge } from './utils'
import { config } from './mode'
import mock from '../mock'
import VuexPersistence from 'vuex-persist'
// 用于使用script标签加载window.Vuex，Vuex会被自动安装，无需手动安装
// Vue.use(Vuex)
const state = {
// other code here
alertingOkCallback () {},
alertingCancelCallback () {},
// other code here
wechat: {},
order: {},
options: {
orderStatus: [
{ value: '0', text: '核保中', belong: '核保中' },
{ value: '1', text: '已取消', belong: '已取消' },
{ value: '2', text: '质检失败', belong: '核保中' },
{ value: '3', text: '核保失败', belong: '核保失败' },
{ value: '4', text: '待核保', belong: '核保中' },
// { value: '5', text: '待质检', belong: '核保中' },
{ value: '5', text: '待缴费', belong: '核保中' },
{ value: '6', text: '已质检', belong: '核保中' },
{ value: '7', text: '待解付', belong: '核保成功' },
{ value: '8', text: '待出单', belong: '核保成功' },
{ value: '9', text: '已出单', belong: '已完成' },
{ value: '10', text: '已分配快递员', belong: '已完成' },
{ value: '11', text: '已取单', belong: '已完成' },
{ value: '12', text: '配送成功', belong: '已完成' },
{ value: '13', text: '配送失败', belong: '已完成' },
{ value: '14', text: '已退单', belong: '已取消' },
{ value: '15', text: '代垫付', belong: '核保成功' },
{ value: '16', text: '转人工', belong: '核保中' }
certificateType: [
{ value: '1', text: '身份证' },
{ value: '2', text: '组织机构代码证' },
{ value: '3', text: '护照' },
{ value: '4', text: '军官证' },
{ value: '5', text: '港澳回乡证或台胞证' },
{ value: '6', text: '其他' },
{ value: '7', text: '港澳通行证' }
const initialStateString = JSON.stringify(state)
const getters = {
config: state =& state.config,
mock: state =& state.mock,
states: state =& state.states,
user: state =& state.user,
wechat: state =& state.wechat,
car: state =& state.car,
order: state =& state.order,
options: state =& state.options
const mutations = {
setStates (state, options) { merge(state.states, options) },
setUser (state, options) { merge(state.user, options) },
setWechat (state, options) { merge(state.wechat, options) },
setCar (state, options) { merge(state.car, options) },
setOrder (state, options) { merge(state.order, options) },
resetAllStoreInfo (state, options) {
merge(state, (() =& {
const originalState = JSON.parse(initialStateString)
states: originalState.states,
// user: originalState.user,
wechat: originalState.wechat,
...originalState.car,
ownerName: state.car.ownerName,
plateHeader: state.car.plateHeader,
plateBody: state.car.plateBody
order: originalState.order
const actions = {
load: ({ commit }, bool) =& commit('setStates', {
isLoading: bool
roar: ({ commit }, { text, callback }) =& commit('setStates', {
isRoaring: true,
roaringText: text,
roaringCallback: callback || null
alert: ({ commit }, { text, callback }) =& commit('setStates', {
isAlerting: true,
alertingText: text,
alertingOkCallback () {
callback && callback()
commit('setStates', { isAlerting: false })
alertingCancelCallback: null
confirm: ({ commit }, { text, okCallback, cancelCallback }) =& commit('setStates', {
isAlerting: true,
alertingText: text,
alertingOkCallback () {
okCallback && okCallback()
commit('setStates', { isAlerting: false })
alertingCancelCallback () {
cancelCallback && cancelCallback()
commit('setStates', { isAlerting: false })
wait: ({ commit }, bool) =& commit('setStates', {
isWaiting: bool
present: ({ commit }, val) =& commit('setStates', {
presenting: val
const vuexLocal = new VuexPersistence({
storage: window.localStorage,
reducer: state =& ({
user: state.user,
wechat: state.wechat,
car: state.car,
order: state.order
filter: (mutation) =& (
mutation.type === 'setUser' ||
mutation.type === 'setWechat' ||
mutation.type === 'setCar' ||
mutation.type === 'setOrder' ||
mutation.type === 'resetAllStoreInfo'
export default new Vuex.Store({
mutations,
plugins: [vuexLocal.plugin]
AttentionPlease be aware of that some of the code above is not written in the best or at least better practice, for example, state.options is just static data, and these data can be separated to a new file and not included in the state variable, because it's not necessary to monitoring these data through vuex. They are listed here just for intention purpose.)AnalyseFirst, let's analyze that which data in variable state should be keep persist - that's to say - which data should be saved to local hardware through Html5 api
localStorage.You can see there are eight children under variable state: 'config', 'mock', 'states', 'wechat', 'user', 'car', 'order', and 'options'. Now I tell you that children like 'config', 'mock' and 'options' are all static data that won't be changed through entire run-time. So it's obviously that only children 'states', 'wechat', 'user', 'car', 'order'. Absolutely, it's not. The children 'states' is used to store data for common layout components like alert dialog popup, and you can see that there is method properties stored in children 'state', so it's not appropriate to save it in localStorage. So finally, we only need to keep data in 'wechat', 'user', 'car' and 'order' persistent. So now you know why the configuration object passed to new VuexPersistence is as below:const vuexLocal = new VuexPersistence({
storage: window.localStorage,
reducer: state =& ({
user: state.user,
wechat: state.wechat,
car: state.car,
order: state.order
filter: (mutation) =& (
mutation.type === 'setUser' ||
mutation.type === 'setWechat' ||
mutation.type === 'setCar' ||
mutation.type === 'setOrder' ||
mutation.type === 'resetAllStoreInfo'
I won't cover configuration detail for vuex-persist, because you can simply open the official link here:
and read it online.ConclusionActually, vuex-persist is just a nom package used to generate a vuex plugin which can save and restore data to and from api like localStorage. You can revise plugin alike yourself, if you read the source code of vuex-persist, you will know it's just not a hard work. If you doesn't know how to write a plugin for vuex, you can read this webpage: .原文地址：2添加评论分享收藏感谢收起11 条评论分享收藏感谢收起查看更多回答在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
import axios from 'axios'
import card from '../card/card.vue'
export default {
name: 'list',
props: ['config'],
components:{
'card':card
content:{}
created () {
axios.get(me.config.url).then(function(res){
var arr = res.data.data
var obj = {}
for(var ele in arr){
arr[ele].forEach(function(x){
if(obj[x.tid]){
obj[x.tid].push(x)
obj[x.tid] = []
obj[x.tid].push(x)
for(var ele in obj){
if(obj[ele].length&4){
me.content[ele] = obj[ele].splice(0,4);
console.log(me.content)
},function(res){
console.log(res)
mounted(){
setInterval(function(){
console.log(this.content)
好吧，其实我想问的是为什么这个card组件不会重新渲染，然后我直接在外面把content展示下，发现他一直是个空对象，不会变的，难道他不会重新渲染吗？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这里this指向变了 把定时器的回调写成箭头函数或者在外部像在前面一样用，me保存一下this
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
因为你的content是一个空对象，vue只对data中定义的对象属性进行监听。
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
直接上代码：
&select class="dept_select select-change" data-placeholder="请选择学院" style="width: 180" name="academys" id="academys" data-rule-required="true" v-model="Academyselect"&
&option v-for="item in academyList" v-bind:value="item.id"&
{{ item.academyName }}
当上面列表数据获取完后，我想引用其他插件初始化它
$('#academys').trigger('chosen:updated');
效果是出来了，但是列表数据显示不出来
请问Vue v-for加载完后要怎么渲染呢
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
把academyList替换为新数组。官网文档“以下两种数据变化vue无法检测，1.通过索引修改值。2.改变数组长度。”。。？赋值新数组不属于以上两种，有数据改变，就会有更新，记得在对应vue实例中定义academyList:[]这个数组，然后方法中赋值this.academyList就可以。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
//Jquery 学期下拉框获取
$.getJSON("&%=ctx%&/course/getTerms", function(data){
if ("success" == data.result) {
$("#terms").html("");
$("#terms").append("&option value=''&&/option&");
for(var i=0 ; i&data.data. i++){
var option = $("&option&&/option&");
option.text(data.data[i]);
option.val(data.data[i]);
$("#terms").append(option);
$("#terms").chosen({search_contains: true});
$("#terms").trigger('chosen:updated');
$("#academys").change(function () {
academyId = $("#academys option:selected").val();
datashow.update();//赋值给名称为datashow的Vue，update的方法里包含了对academyList的赋值
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：重新请求vue里面的data数据时，如何重新赋值？ - VueClub
这家伙很懒，什么个性签名都没有留下。
发布于 9个月前
11977 次浏览
看看this 是什么
this.items = 这句, 是处于 getIndexDataInTag.then() 的回调函数中, this 并不是指向 vm, 你需要把回调函数改为箭头函数
thanks,指向vm就可以了。
蒽，指向里面的，不成立。我把它指向vm就行了。
Vue中文社区 独家公众号，面向前端爱好者， 每日更新最有料的文章，最前沿的资讯,内容包含但不限于Vue,React,Angular,前端工程化...等各种"大保健"知识点,右上角点关注,老司机带你弯道超车,不定期更有各种福利赠送
?? 亲,微信扫一扫奴家
服务器搭建在
存储赞助商为
声明：内容均来自于网络，如有侵权行为请发送邮件至,我们将在第一时间删除