是什么原因导致VueJS在此实例中停止更新DOM？

我看过我能找到的每一个类似的post，但似乎没有答案可以解决我的问题。 具体来说，它不会使用id“table”更新表。

HTML：

 
 
 
 
 
 
 
 
Filters
 
 
 
 
 
 
 
 
 
 Category:  Any  {{category.categoryTitle}}  
 
 
 
 Air Date: 
 
     
 
 Show Number:  
 
 
 
 Question contains:  Dollar Value:  
 
 
 
 
 
 
 Reset Filters Filter 
 
 
 
 
 
 
 
 
 
 
 
 
Jeopardy Questions
 
 
 Total Entries: {{entries.length}} entries 
 
 
 
 
 
 
 
 
 Question ▲ ▼ 
 
 Answer ▲ ▼ 
 
 Value ▲ ▼ 
 
 Show Number ▲ ▼ 
 
 Category ▲ ▼ 
 
 Air Date ▲ ▼ 
 
 
 
 
 
{{entry.questionText}}
 
{{entry.answerText}}
 
{{entry.dollarValue}}
 
{{entry.showNumber}}
 
{{entry.categoryTitle}}
 
{{entry.airDate}}
 
 
 
 No entries to display 
 
 
 
 
 
 
 
 
 
  

JS

 var app = new Vue({ el: '#body', data: { loggedIn: false, questionSort: 0, answerSort: 0, valueSort: 0, showNumberSort: 0, categorySort: 0, airDateSort: 0, entries: [], url: "/questions", categories: [], // form model data categoryTitle: '', airDate: '', questionText: '', dollarValue: '', showNumber: '', }, mounted: function () { $.get("/api/categories", function(result) { Vue.set(app, "categories", result.data); $('.js-example-basic-single').select2(); }, "json").fail(function(err) { showErrorMessage(err.responseJSON.message_prettified); }); }, methods: { filter : function() { var queryParams = "?"; var params = 0; app.categoryTitle = $('#category :selected').text().trim(); if (typeof app.categoryTitle !== "undefined" && app.categoryTitle != null) { params++; queryParams += "categoryTitle=" + app.categoryTitle } if (app.airDate.length > 0) { params++; if (params > 0) { queryParams += "&"; } queryParams += "airDate=" + app.airDate } if (app.questionText.length > 0) { params++; if (params > 0) { queryParams += "&"; } queryParams += "questionText=" + app.questionText } if (app.dollarValue.length > 0) { params++; if (params > 0) { queryParams += "&"; } queryParams += "dollarValue=" + app.dollarValue } if (app.showNumber.length > 0) { params++; if (params > 0) { queryParams += "&"; } queryParams += "showNumber=" + app.showNumber } if (queryParams.length == 1) { queryParams = ""; } var url = "/questions" var URL = url + queryParams; $.get(URL, result => { Vue.set(app, "entries", result.data); app.$forceUpdate(); }, "json").fail(function(err) { showErrorMessage(err.responseJSON.message_prettified); }).always(function() { $("#loader").addClass("toggled"); }); } } }); 

目前的行为：

对/ api / categories的AJAX调用正确地更新了DOM上的下拉列表，允许我选择一个类别。 当应用程序安装时，它会更新表格，显示colspan 6“没有要显示的条目”单元格。 但是，在发送并返回filter请求之后，表不会更新以反映更新的数据（尽管在控制台中检查时数据正确显示为已更改）。

预期行为：

当AJAX调用/ question with query params解析并更新app中的条目数据字段时，表会更新以反映更改。

尝试修复：

探索$ forceUpdate，$ set，Vue.set，并使用for循环手动覆盖数组。

编辑：

经过大量的窥探并整合VueX（如下所述@WaldemarIce）可能有所帮助，但无论如何改进了我的迷你程序的整体代码结构，我已经找到了解决方案。

这篇关于Laracast的post让我想知道是否存在数据问题： https ：//laracasts.com/discuss/channels/vue/v-for-loop-rendering-keeps-throwing-undefined-error

这让我意识到问题在于这行代码：

  {{category.categoryTitle}} 

这导致了一个问题，因为value =“category.categoryTitle”中的类别直到生命周期的后期才定义。 我将其更改为v-bind：value =“category.categoryTitle”并更新了我的JS以使其现在正常工作。 我在关于@Kaicuipost的后续讨论中发布的TypeError导致Vue失去了数据的react native。 一旦我解决了这个问题，Vue就开始再次做出正确的反应。

更新的HTML：

 
 
 
 
 
 
 
 
 
Filters
 
 
   
 
 
 
 
 
 
 
 
  Category:  Any  {{category.categoryTitle}}  
 
 
 
 Air Date: 
 
     
 
 Show Number:  
 
 
 
 Question contains:  Dollar Value:  
 
 
 
 
 
 
 Reset Filters Filter 
 
 
 
 
 
 
 
 
 
 
 
 
Jeopardy Questions
 
 
 Total Entries: {{entryCount}} entries 
 
 
 
 
 
 
 
 
 Question 
 
 Answer 
 
 Value 
 
 Show Number 
 
 Category 
 
 Air Date 
 
 
 
 
 
{{entry.questionText}}
 
{{entry.answerText}}
 
{{entry.dollarValue}}
 
{{entry.showNumber}}
 
{{entry.categoryTitle}}
 
{{entry.airDate}}
 
 
 
 No entries to display 
 
 
 
 
 
 
 
 
 
 
  
  

更新了JS

  Vue.use(Vuex) Vue.config.debug = false; Vue.config.silent = true; var URL; const store = new Vuex.Store({ state: { loggedIn: false, // ordering data questionSort: 0, answerSort: 0, valueSort: 0, showNumberSort: 0, categorySort: 0, airDateSort: 0, // server related ata entries: [], url: "/questions", categories: [{ categoryTitle: "Test", }], }, mutations: { categories (state, data) { state.categories = data; }, entries (state, data) { console.log(data); state.entries = data; console.log(state.entries) } }, actions: { fetchCategories ({ commit }) { $("#loader").removeClass("toggled"); $.get("/api/categories", function(result) { commit('categories', result.data); }, "json") .fail(function(err) { if (err.status == 0) { showErrorMessage("Network Problem"); } else { showErrorMessage(err.responseJSON.message_prettified); } }).always(function() { $("#loader").addClass("toggled"); }); }, }, }); var app = new Vue({ el: '#body', store: store, data: { categorySelect: "", }, mounted: function() { store.dispatch("fetchCategories").then(() => { $('.js-example-basic-single').select2(); }); }, computed: { categories: function() { return store.state.categories; }, entryCount: function() { if (store.entries) { if (typeof store.entries.length !== "undefined") { return store.entries.length; } else { return 0; } } else { return 0; } }, entriesValid: function() { if (store.state.entries) { if (typeof store.state.entries.length !== "undefined" && store.state.entries.length > 0) { return true; } else { return false; } } else { return false; } }, entries: function() { return store.state.entries; }, loggedIn: function() { return store.state.loggedIn; }, }, methods: { reset: function() { $('.js-example-basic-single').val('').trigger('change'); $("#datetimepicker1").datetimepicker("clear"); $("#categoryTitleHidden").val(""); $("#showNumber").val(""); $("#questionText").val(""); $("#showNumber").val(""); $("#dollarValue").val(""); }, filter : function() { var value = $('#category :selected').text().trim(); if (value !== "Any") { $("#categoryTitleHidden").val(value); } else { $("#categoryTitleHidden").val(""); } var options = { success: function(responseText, statusText, xhr, $form) { store.commit("entries", JSON.parse(xhr.responseText).data) } }; $("#filterForm").ajaxSubmit(options); } } }); 

Answer 1

IMO问题导致Vue.set（app，…）。 AFAIK您无法在Vue实例本身上设置属性。

编辑 ：使用Vuex的实例和使用jQuery的异步数据

 var store = new Vuex.Store({ state: { // Car manufacturers for datalist will be held here. // Cars are globally accessible, in every component, // as this.$store.state.cars cars: null }, mutations: { // Mutations changes state, but must be sync, // so you can't call $.get() or another // async function in any mutation. updateCars: function (state, payload) { state.cars = payload } }, actions: { // For async ops there are actions, // but they can't change state - for state // change fire particular mutation. loadCars: function (context, payload) { $.get(payload.src).then(function (data) { context.commit('updateCars', data) }) } } }) Vue.component('my-list', { template: '#my-list', props: ['src'], // All components see this.$store.state.cars, but // still can have own local data. data: function () { return { manufacturer: '' } }, // Fire async store action created: function () { this.$store.dispatch({ type: 'loadCars', src: this.src }) } // Alternatively, you can use this // version - w/o action. It's OK to use // mutation here, in callback of async function. /* created: function () { $.get(this.src).then(function (data) { this.$store.commit('updateCars', data) }) } */ }) new Vue({ el: '#app', // Inject store state to all components store: store }) 

Answer 2

您的代码无法运行，因为它依赖于您的服务器响应。

但我认为你的代码设置共享数据到entries是好的。

当其他js代码导致exception时，可能会发生这种问题，这会中断vue的呈现。

你可以查看控制台，看看有没有错误？