Vue监视不会在数组中的元素上触发
是因为Vue的响应式系统在监视数组时，只能捕获到对数组的变异方法的调用，而无法捕获到直接对数组元素的修改操作。
具体来说，Vue的响应式系统通过劫持数组的变异方法（如push、pop、shift、unshift、splice、sort、reverse）来实现对数组的监视。当调用这些变异方法时，Vue会在内部进行相应的数据更新和视图更新。
然而，如果直接对数组中的元素进行修改（如通过索引直接赋值），Vue是无法感知到这种修改的，因此也无法触发相应的数据更新和视图更新。
为了解决这个问题，Vue提供了一些特殊的方法来处理数组的变异操作，以确保能够正确地触发数据更新和视图更新。这些方法包括：
- 使用Vue.set或this.$set方法：可以通过这个方法向数组中指定的索引位置插入一个新元素，并触发数据更新和视图更新。例如：
- 使用Vue.set或this.$set方法：可以通过这个方法向数组中指定的索引位置插入一个新元素，并触发数据更新和视图更新。例如：
- 使用数组的splice方法：可以通过splice方法对数组进行插入、删除、替换等操作，并触发数据更新和视图更新。例如：
- 使用数组的splice方法：可以通过splice方法对数组进行插入、删除、替换等操作，并触发数据更新和视图更新。例如：
需要注意的是，以上方法只能处理已经存在的索引位置的变动，无法直接监听新增的属性或删除的属性。如果需要监听新增的属性或删除的属性，可以使用Vue.set或this.$set方法来实现。
对于Vue的监视数组的应用场景，主要是在需要对数组进行动态操作并实时更新视图的情况下，例如列表展示、表格展示等。在这些场景下，使用Vue的响应式数组能够方便地实现数据和视图的同步更新。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mpns
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse
相关·内容
我正在使用Vue.js 3。我遇到了一个问题，让我们先看看代码。
码
ChildComponent.vue
<template>
<div>
{{ modelValue }}
<input v-model="resultString"/>
<button @click="showModelValue">show model value</button>
</div>
</template>
<script lang="ts">
impor
浏览 8提问于2022-04-27得票数 0
回答已采纳
1回答
我在Laravel项目工作，我的前线是Vue 2。
我尝试呈现一个由用户更改的输入表单，并在用户更改任何内容后触发。
我试图将我的react应用程序复制到Vue，并希望使用useEffect钩子作为触发器。
数据: loanTypingDetails改变了，而手表中的函数不触发(console.log .)
模板
<form className="details-loan-input">
<h4>
<input
type="number"
name="l
浏览 4提问于2022-07-19得票数 0
我正在使用Select作为Vue组件，并将其定义为模板。我正在定义组件、数据和支持。
var MyComponent = Vue.component('my-component',{
template: "<select v-on:change=\"onAppSelected\" \n"+
"v-model:value=\"appId\"> \n"+
"<option v-for=\"appChoice in appChoices\"
浏览 0提问于2018-12-27得票数 0
回答已采纳
当我单击按钮时，我将数组drinks作为道具传递给Drinks.vue和Drinks.vue内部的映射元素，它应该会发出事件，将元素更改为“已售出”。但是，当使用console.log或Vue developer tool进行调试时，它显示drinks数组已更新，但页面本身不会重新呈现或更新...Fruits运行得很好。你知道为什么Drinks.vue不能更新drinks array吗 App.vue <template>
<div>
<Header :shop_name="shop_name" v-on:change_shop_
浏览 22提问于2020-08-24得票数 0
我理解，当正在监视的属性/数据被更改/重新分配时，将触发该属性/数据的监视方法。
但是，在这个代码片段中，initTasks的watch方法是被触发的，尽管initTasks没有被更改/触摸(至少看起来是这样)。
这个代码段应该在每次添加任务时增加“估计值”。但是，估计值不会增加，因为每次都会被initTask的watch方法覆盖。
Vue.component('customcomponent', {
props: ['initTasks', 'initEstimate'],
data() {
return {
ta
浏览 1提问于2019-01-30得票数 0
回答已采纳
1回答
我在mu app.vue中有两个组件，我将在页面加载时将数据从app.vue发送到我的第一个组件(过滤器组件)。 现在，根据第二个组件中显示的数据中的用户操作，我需要将新的值传递回第一个组件。 在这里我使用了a和a。考虑我在第一个组件中收到的属性之一是"nselectedOption“，我在data中这样做：{ return { selectedOption: this.nselectedOption }}以避免突变警告。 现在，每次我从第二个组件更新此组件的值时，我只看到"nselectedOption“中的更改，而不是"selectedOption”中的更改。你能
浏览 9提问于2019-05-08得票数 0
回答已采纳
我需要查看的vue资源HTTP请求。如果发现了新数据，我希望将推送到v-for循环，如果发现的数据被删除，则希望删除，而无需重新呈现整个v-for数据。
JS
new Vue({
el: '#chats',
http: {
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
},
data: {
chats: []
浏览 2提问于2016-09-11得票数 1
我把这些字符串放在一个模板中：
<li class="list__item" ng-repeat="item in items">
<input class="toggle" type="checkbox" ng-model="item.done">
<label>{{ item.description }}</label>
<button class="destroy" ng-click="remove(item)
浏览 0提问于2014-06-05得票数 1
回答已采纳
3回答
我正在为vue2使用。虽然它呈现得很好，并且看起来在基本用法下运行良好，但我无法检测到vue组件中输入值的更改。我尝试将@change添加到组件实例中，尽管它似乎从未触发过。知道为什么会这样吗？注意，v-model成功地更新了cool的值。
Vue方法
export default {
...
methods: {
someEvent() {
alert("SUCCESS"); //this never fires
}
Vue标记
浏览 2提问于2018-01-04得票数 2
1回答
如何在组件方法中通过ajax遍历数据集？问题是，当我尝试调用一个方法在component mounted()上执行循环时，数据还不在那里。如何告诉我的vue组件等待ajax数据到达以执行函数？
Vue.component('sidebar', {
props: ['people'],
template: `
<div id="sidebarContain" v-if="this.people">
<div v-for="person in people&
浏览 17提问于2017-08-21得票数 1
1回答
我开始使用Laravel和Nuxt进行小项目，所以我创建了一个用于在数据库中添加用户的小程序。每件事都进行得很顺利，我有一个小问题，我的axios脚本像一个循环一样发送多个请求：
这是完整的代码：
<script>
import $ from 'jquery'
import Swal from 'sweetalert2'
import toastr from 'toastr'
import Vue from 'vue'
Vue.component('pagination', require('
浏览 4提问于2019-12-29得票数 1
回答已采纳
$watch可以在Vue.js中监听道具吗？
我在实验室测试，发现我看不到道具：
在我的index.vue中：
<test-com :data="pass_data"></test-com>
...
export default {
data(){
return {
pass_data: {a:'a', b:'b'}
...
}
}
methods: {
add_select_data(){
this.pass_data.c = 'c
浏览 3提问于2018-04-06得票数 0
我在用Vue组件和Laravel做出版物。
我有一个名为publications.vue的父组件，它有两个名为create.vue和list.vue的子组件，而list.vue则有另一个称为remove.vue和update.vue的子组件。
问题是，当我在数组中添加或删除一个发布时，它工作得很完美，但是当我修改一个元素时，它就没有反应了。控制器工作得很好，但是除非我刷新，否则屏幕上什么都没有。
这是我的密码：
<template>
<div class="main">
<create
:user=&
浏览 3提问于2020-08-13得票数 1
回答已采纳
3回答
对于我的react/Express应用程序，我试图使用useEffects更新组件状态，以便在组件呈现时运行一次。在useEffect中，我对快速服务器进行了一次提取。
const Favorites = ({ user }) => {
const loggedIn = user.loginname === "" ? false : true;
const [favs, setFavs] = useState([]);
useEffect(() => {
if (loggedIn) {
fetch(`/user/favs/${use
浏览 5提问于2020-08-09得票数 0
2回答
我正在尝试得到一个用v-for渲染的列表，以错开它在Vuejs文档中的构建。我使用stagger属性并触发一个Vue.nextTick标志，以使转换在ready触发器之后立即触发。不确定我是不是漏掉了什么。使用Vue 1.0.26。有什么想法吗？
演示：
文档：
浏览 1提问于2016-09-12得票数 0
回答已采纳
我的Vuex商店有一个数据集合，比如说1000条记录。有一个带有参数getItem的getter，它接受一个ID并返回正确的记录。
我需要访问该getter的组件知道数据何时准备就绪(当所有记录的异步获取完成时)。
但是，因为它是一个参数化的getter，所以Vue不会监视它所依赖的状态，从而知道何时更新它。我该怎么办？
我一直想恢复到我在Angular中经常使用的BehaviorSubject模式，但是Vuex + rxJS对此似乎很重，对吧？
我觉得我需要以某种方式触发getter重新计算。
store.js
import Vue from 'vue'
import Vue
浏览 1提问于2018-09-03得票数 5
我试着看一个有子列表的列表，一些<input>可以很好地更改子列表。
<div id="app">
<div v-for="sub in list">
<div v-for="(v,idx) in sub">
<input v-model="sub[idx]"/>
</div>
</div>
</div>
<script>
new Vue({
e
浏览 4提问于2020-04-14得票数 2
回答已采纳
我想在我的Dashboard.vue上画一个折线图。x-axis和Y-axis上的数据来自我的vuex商店。当我在浏览器上查看Vue插件时，我可以看到商店中的数据正在被访问。这是我的LineChart.js文件版本(图表逻辑所在的位置)。 import { Line } from 'vue-chartjs'
export default ({
extends: Line,
data() {
return {
xAxis: [],
yAxis: [],
title: "My activities"
浏览 26提问于2019-02-06得票数 0
我尝试在数组上使用$scope.$watchCollection()方法，为了运行一些筛选，我需要监视这些更改。当用户使用复选框和按钮来切换给定数组中的一个或多个这些对象的布尔值时，$watch不会被适当触发。但是，如果将$watchCollection更改为$scope.$watch(arr, function(){}, true)，并将objectEquality标志设置为true，则会使$watch正常工作。为什么$watchCollection不自动使用objectEquality来确定是否进行了更改？
浏览 3提问于2014-10-15得票数 1
回答已采纳
在vue.js中，我想确定我的组件应用程序可以占用的最大大小。我需要给出精确的宽度和高度坐标的wasm应用程序，我想嵌入它之间的一个v-工具栏和v-页脚。
我可以获得整个窗口的大小并减去一个硬编码值(补偿工具栏和页脚)，但最优雅的解决方案是确定组件的最大可用大小。
有办法这样做吗？
如果维度发生变化，是否有一个由框架触发的事件？
浏览 1提问于2019-03-05得票数 0
回答已采纳
我试图(深入)监视Vue 3中任何对反应性对象的更改：
import { reactive, watchEffect } from 'vue';
const settings = reactive({
panes: {
left: {
defaultAction: "openInOtherPane",
},
right: {
defaultAction: "openInThisPane",
},
},
showMenu: false,
isDrawerOpen: false
浏览 2提问于2021-02-05得票数 4
因此，我无法使lodash的洗牌方法在Vue.js中动画化，即使我已经从文档中复制了代码.
洗牌是会发生的，但动画不会发生。我已经测试了动画，实际上是从数组中删除项目，动画作品，但当我使用洗牌方法，它只是立即发生，而不是顺利。
构成部分：
<transition-group name="list">
<span class="letter" v-for="(letter, key) in data" :key="key">
{{ letter }}
</span>
</tran
浏览 6提问于2022-06-22得票数 0
回答已采纳
当我从下面的第一个代码块传递给第二个代码块时，我无法让watch函数触发。我得到了params，因为我可以在刷新时注册它，但是它没有被监视。
第一块
<template>
<router-link :to="{ name: 'page', params: { mus: mus } }">
<q-btn
filled
label="Get"
/></router-link>
</template>
<script>
impo
浏览 5提问于2022-03-30得票数 0
回答已采纳
有时我需要调用一些函数来响应数据属性的变化。但是，我还需要该函数来触发data属性的初始值。
观察器不会在组件初始化时触发，因为从技术上讲，被监视的属性尚未更改。因此，我最终将函数放在methods对象中，然后在watcher和mounted钩子中调用该方法。
下面是一个例子：
new Vue({
el: '#app',
data() {
return {
selectedIndex: 0,
}
},
methods: {
focusSelected() {
this.$refs.input[this.sel
浏览 0提问于2017-07-27得票数 20
回答已采纳
1回答
当我的vuex状态数据发生变化时，我需要在组件中触发一个函数，但是它不能工作，对于vuex有什么错误的使用吗？
const state = {
currentQueryParameter:[],
};
const mutations = {
currentQueryParameter(state,info){
state.currentQueryParameter[info.index]=info.value
Vue.set(info, info.index, info.value);
}
}
在组件中
watch: {
浏览 0提问于2019-09-14得票数 1
我有两个输入，存储了来自谷歌地图脚本的lat和lng，如果用户改变了标记的位置，这两个输入得到了用户点击的lat和lng，所以我想得到这两个输入的值，我尝试了v- =>，但它不起作用。我注意到只有当我通过键入或粘贴的方式改变这些输入的值时，v-model才会被触发。有没有一种方法可以让我的Vue实例获得这些输入的值(比如on-change)？
浏览 3提问于2016-11-01得票数 1
我实际上在学Vue3。在我看来，这似乎是非常清楚的。但有一件事一点也不清楚。手表和beforeUpdate的区别。这两者有什么不同吗？如果是的话，什么时候用一种而不是另一种？
浏览 4提问于2022-09-19得票数 0
我想知道为什么vue UPDATE在直接设置索引项时会更改到页面。在正式文档的累加中，当我直接设置索引项时，Vue无法检测到对数组的更改。我的代码就像
const app = new Vue({
el: '#app',
data(){
return {
title: 'Hello, world!',
courses: ['Math','Literature','
浏览 5提问于2021-02-24得票数 1
回答已采纳
2回答
当我点击按钮后数组shows[]发生变化(我可以在Vue的铬插件中看到shows[]的变化)，字符'a‘仍然在页面上。’B‘和'c’永远不会出现。
<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
currentShow:
浏览 4提问于2018-04-23得票数 2
回答已采纳
2回答
首先，我有一个Vue JS文件--
export var myVue = new Vue({
el: '#myApp',
data: {
myCoordinates: new Set() // simple integers
},
methods: {
addCoordinates (c) {
this.myCoordinates.add(c);
}
}
}
然后我有另一个JS文件，它导入了Vue并做了一些绘图--
import { myVue } from '
浏览 5提问于2018-06-17得票数 0
我正在编写一个Vue单元测试，我需要模拟一个被触发的监视器。 我最初尝试通过更改被监视的属性的值来触发它，但这并没有触发监视器。 在阅读了一个great article之后，我意识到我应该触发观察器，而不需要我的测试来检查观察器是否工作。 他们基本上建议您可以通过以下方式触发观察器： const wrapper = shallowMount(YourComponent);
wrapper.vm.$options.watch.someWatchedProperty.call(wrapper.vm, 'someData'); 然而，这似乎不适用于使用Vue的实例方法$watch
浏览 19提问于2020-06-12得票数 1
问题
Codepen：
首先，您可以在以下位置跟踪这个问题：
此外，我还有一个使用datepicker的项目，它根据给定的日期重新划分图表，因此，如果您查看代码页，在BarChart.vue上，您可以看到我添加了观察者来重新修改图表。
但每次我选择约会时都会出错
背景
简单地说，我找不到如何把梯度放到图表上的例子。
代码
BarChart.vue
<script>
import { Bar, mixins } from "vue-chartjs";
import { mapGetters } from "vuex"
浏览 3提问于2019-02-18得票数 0
自从Xcode 12.5，我看到很多“无法呈现。请提交一个错误。”控制台记录在Xcode控制台中，我记得在12.5之前没有看到它。
当我使用父视图中的NavigationLink导航到子视图时，如果子视图中的逻辑更新父视图所依赖的状态之一，则会显示此消息。
下面是一个示例伪代码，其中消息列表显示在父视图中，消息详细信息从列表显示在子视图中，最后是独立设置子视图。
struct MessageListView: View {
...
@StateObject var messageList = MessageList()
var body: some View {
浏览 9提问于2021-05-20得票数 4
在我的自定义指令中，我根据数据源数组中的对象数向DOM添加元素。我需要观察每个对象中的特定属性。当我将这些元素添加到DOM时，我想在$watch数组中的每个对象的checked属性上设置一个toppings，但是它不起作用，我不知道为什么。我在函数中设置了一个断点，当属性从true更改为false或false到true时，应该调用该断点，但该函数从未被调用。原因明显吗？我只是在学角，所以我很容易犯一个愚蠢的错误。
$scope.bits = 66; (i.e. onions and olives)
$scope.toppings = [
{ topping: 1, bits: 2
浏览 2提问于2014-10-24得票数 6
回答已采纳
我们为tab主体提供了一个动态组件，定义为
<component :is="currentTab.itemType" :itemId="currentTab.itemId"></component>
模板有一个span，它反映了itemId --每当currentTab在选项卡主机组件中更改时，它就会发生变化。
tab.itemType的每个组件都有Vuex模块，属于它的特定类型。
例如，有一个具有描述状态的存储模块product：
{
products: { [itemId: string]: IProduct }
}
当组件创建或
浏览 2提问于2019-08-16得票数 2
回答已采纳
2回答
我在vue-路由器上使用Vue.js 1.0。
我有一个组件UserList.vue
<template>
<a v-link="{name: "user_list", params: {cat: 'admin'}}">admin</a>
<a v-link="{name: "user_list", params: {cat: 'normal'}}">normal</a>
</template>
<script&
浏览 5提问于2016-10-24得票数 0
回答已采纳
2回答
我已经创建了一个名为Input的组件。传递给此Input组件的所有属性都是成功继承的，但是由于某种原因，ref属性总是被省略。
在验证失败后，我需要ref属性来设置元素的焦点。
Some.vue
<template>
...
<Input
type="number"
name="mobile"
ref="mobileRef"
v-model="this.form.mobile"
:class="errors.
浏览 4提问于2022-04-06得票数 1
回答已采纳
根中有两个对象-- obj和newObj。我用deep: true查看我的deep: true对象上的更改，在更改时相应地更新newObj。
在我的vue调试器中，newObj看起来像预期的那样更新了，但是组件没有执行for循环计数。或者，如果我尝试{{ newObj }}，它只记录第一个更新。
我试图重新创建这个问题，。
我的html：
<div id="app">
<button @click="appendTo">Append</button>
<my-comp v-bind:new-obj="ne
浏览 2提问于2017-08-07得票数 2
回答已采纳
我希望在使用vue.js的事件发生后自动单击链接
通过使用相关的参考文件，我得到了以下错误：
<a ref="goTo" href="#">Go To...</a>
**Vue code**
this.$refs.goTo.click();
无法读取未定义的“单击”属性
浏览 2提问于2020-09-03得票数 0
2回答
我试图用vue.js从JSON文件中生成html标记(子节点)，但是控制台中有这样的错误：(从呈现函数返回的多个根节点)。呈现函数应该返回一个根节点)
javaScript代码：
const createComponent = (dNode, h) => {
// Handle empty elements and return empty array in case the dNode passed in is empty
if (_.isEmpty(dNode)) {
return [];
}
// if the el is array call crea
浏览 3提问于2019-03-03得票数 2
1回答
我正在处理几个vue聊天库，我有以下代码：
<template>
<p>{{ this.users[0] }}</p>
</template>
<script>
export default {
data() {
return {
users: []
}
},
mounted() {
firestoreService.getAllUsers().then(({ data }) => {
data.forEach((user, i) => {
浏览 5提问于2022-07-05得票数 0
1回答
从AngularJS开始，并试图找出当控制器中的变量发生变化时侦听事件的最佳实践。我让它工作的唯一方法是发出，如下所示。
例如：
var app = angular.module("sampleApp", [])
app.controller("AppCtrl", function($scope){
$scope.elements = [
{
name: "test"
}
]
$scope.addElement = function() {
$scope.elements.push({
浏览 1提问于2013-10-22得票数 5
回答已采纳
1回答
我试着在原则上做一些非常简单的事情，但我一直得到一个cross-threading exception，这让我感到困惑，因为我没有打算使用多个线程。
我有一个Windows窗体应用程序。它启动另一个Windows Forms应用程序(使用System.Diagnostics.Process类)，并在该应用程序关闭时捕获退出的事件。然后，我的应用程序事件处理程序尝试将文本从剪贴板复制到当前显示的窗体上的控件。此时将抛出一个Cross-threading exception。
我假设问题是来自关闭应用程序的事件在另一个线程中(我在这里超出了我的舒适区，所以请容忍我)，所以问题可以归结为“我如何防止
浏览 0提问于2012-12-11得票数 3
回答已采纳
我想知道为什么我更改了数组的特定项而页面没有更新。我知道vue.js的医生指出：
由于JavaScript中的限制，Vue无法检测到对数组的下列更改：
当您使用索引直接设置项时，例如vm.items[indexOfItem] = newValue。
它说我们应该这么做，但我不知道为什么。我发现了一个类似的问题()。
以下是上述问题中的一些代码：
// works well
data() {
return {
cart: {
item: {
nums: 10,
price: 10,
},
},
}
},
c
浏览 7提问于2019-08-22得票数 7
回答已采纳
如何在Vue js中从外部javascript触发'methode‘内的函数？ 我想在vue js中从index.html触发方法内部的调用()。 有人能帮我解决这个问题吗？
浏览 18提问于2020-04-23得票数 0
我创建了一个组件，其中包含一个音频标记。我一直试图将mp3的文件路径从其父组件传递给组件，但是由于某种原因，音频元素似乎无法成功地加载文件。这个元素最终会变灰，我不会有任何错误。我知道这些属性正在成功地传递，因为我也传递了轨道的标题，并且在组件中加载得很好。但是，如果我为源代码硬编码相同的路径，那么它可以正常工作。这不是什么大不了的事，但我有11首歌要做，用v语句就容易多了。
以下是我的父组件：
<template>
<div container>
<div class=banner>
<img
浏览 0提问于2019-02-10得票数 1
回答已采纳
1回答
我正在构建一个应用程序使用vue.js与材料设计启动(mdb) - 。根据文档，要想使用select样式，我需要通过以下方式覆盖标准select：
$(document).ready(function() {
$('.mdb-select').material_select();
});
但是，我不知道将上述代码放在我的vue.js组件中的位置。我试着把它放在我的create方法中：
<template>
<select class="mdb-select">
<option>1</option
浏览 2提问于2016-09-26得票数 1
回答已采纳
我构建了一个图，当一个新用户加入聊天时，该图保持不变，尽管this.users对象(所有当前用户都存储在这里)发生了变化。如何在向this.users添加新用户时重绘图形？
<template>
<div>
<svg width="290" height="500" class="container-border"></svg>
</div>
</template>
<script>
import * as d3 from "d3
浏览 0提问于2020-11-27得票数 0
1回答
我有三个vue组件列表，Car，AddNew
List.vue是父组件，有两个组件，如下所示：
<add-new :cars-models="carModels"></add-new>
<car
v-for="(car, index) in items"
:key="car.id"
:data="car"
:car-models="carModels"
>
</car
浏览 0提问于2019-07-02得票数 0
回答已采纳
1回答
我在前端用Vue.js做了一些实验，我定义了一个这样的组件： <template id="order-item">
<select v-model="item.product">
...
</select>
<input type="number" v-model="item.quantity">
<textarea v-model="item.variants"></textarea>
&
浏览 11提问于2020-06-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
