我在vue watch中有一个带有两个参数的方法，其中一个参数不能更改。
在Vue的watch中，如果你有一个带有两个参数的方法，并且其中一个参数不能更改，你可以通过以下方式实现：
- 首先，在Vue组件的
data选项中定义一个变量，用于存储不能更改的参数的值。
data() {
return {
fixedParam: '固定参数',
};
},- 在Vue组件的
watch选项中监听需要观察的数据，并在回调函数中调用带有两个参数的方法。
watch: {
// 监听需要观察的数据
watchedData(newVal, oldVal) {
// 调用带有两个参数的方法
this.methodWithTwoParams(newVal, this.fixedParam);
},
},- 在Vue组件的
methods选项中定义带有两个参数的方法，并在其中处理逻辑。
methods: {
methodWithTwoParams(param1, param2) {
// 在这里处理逻辑，param1为可更改的参数，param2为不能更改的参数
console.log(param1, param2);
},
},这样，当watchedData的值发生变化时，methodWithTwoParams方法会被调用，并传入新的值和固定的参数值。
关于Vue的watch功能的更多信息，你可以参考腾讯云的Vue.js文档：Vue.js Watch。
相关·内容
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
1回答
动态管理VueJs监视器
、、、
我有一个带有表行的组件，其中有多个字段。通过更新一个字段将更新另一个字段，其值基于保证金或销售价格。
但是当我观察所有的领域时，我得到了一个弹跳的效果。添加_debounce可以帮助解决问题，但并不能解决问题。为了尝试和管理这个问题，我使用了对观察者的回调来触发unwatch()，但是当我重新添加这些观察者时，回调就停止了。
我有一个工作要点作为代码的一个例子。
Vue.component('pricing', {
template: '#pricing-row',
props: ['item'],
mounted() {
浏览 1提问于2017-11-18得票数 0
回答已采纳
1回答
我有一个python项目(使用flask)，其中我正在尝试使用Vue。问题是，如果我去偷看html的定义，没有任何与vue相关的渲染。我已经通过npm安装了vue，还安装了webpack和laravel-mix。它们似乎配置得很好。 我有一个实例 import Vue from 'vue';
import alert from './components/Alert.vue';
new Vue({
el: '#app',
delimiters: ['[[', ']]'],
data: {
t
浏览 14提问于2021-09-09得票数 0
回答已采纳
2回答
我有一个vue (Version2.x)文件，其中有3个字段- input1 x input2 = result
现在，当我改变其中任何一个，其他两个应该是动态更新。我尝试使用watch属性，但这会导致无限循环，因为观察者一直在相互调用。
我在这里有什么与vue有关的帮手吗？任何帮助都将不胜感激。
例如，请参考此代码。
<template>
<input v-model="input1"></input>
<input v-model="input2"></input>
<input
浏览 0提问于2018-06-13得票数 2
回答已采纳
我在vue中创建了多个带有复选框的输入域，我希望只有一个输入域是真的。因此，如果用户单击其中一个，则其他复选框应为false，以便只有最后一次单击的复选框为true。
我的代码是这样的：
new Vue({
el: "#app",
data: {
selected: null,
options: [
{"id": 1, "title": "One", "value": false},
{"id": 2, "title&#
浏览 0提问于2020-07-08得票数 0
我的package.json中有以下内容
"scripts": {
"serve-fake-api": "nodemon fake-api/server.ts --watch 'fake-api/*.*'",
"serve-vue": "vue-cli-service serve",
"serve": "concurrently -k \"npm run serve-fake-api\" \"npm run serve-vu
浏览 9提问于2019-11-09得票数 2
回答已采纳
1回答
你能解释一下为什么吗？ 当我在Vue 3中改变对象时，不会调用。相反，我需要完全替换object。 https://codesandbox.io/s/nostalgic-glade-zer8v?file=/src/components/HelloWorld.vue methods: {
change() {
// Triggers watch
this.user = { ...this.user, name: "hello" };
// Doesn't triger watch
this.user.name =
浏览 27提问于2021-03-01得票数 1
回答已采纳
我正在这个应用程序中使用Vuejs/Nuxtjs开发一个应用程序，我在这个应用程序中有一个组件IdentifiersNode.vue，我想查看Vuex数组identifiersArray。
我可以观察identifiersArray的直接更改，比如push, direct key-value changes，但是当我在identifiersArray中添加一个新的对象时，watch由于某种原因就不能工作了。
下面是我的watch中的IdentifiersNode.vue函数
watch: {
'$store.state.modules.identifiersInfoStore.
浏览 15提问于2022-03-23得票数 0
回答已采纳
我用的是Vue.js和Vuex。我想要watch store的值(我将在这篇文章的最后分享我的示例代码)。但是我遇到了错误" error : vuex store.watch只接受函数“。
在这个网站上，我发现了如何使用"single“商店。
然而，在我的例子中，我想使用“两个”商店。你有什么办法来解决这个问题吗？
Index.js
'use strict';
import Vue from 'vue';
import Vuex from 'vuex';
import {test1Store} from './mod
浏览 7提问于2018-01-11得票数 1
回答已采纳
1回答
因此，我试图在Vue 3中构建一个充当表单的组件，为了让父对象处理数据，我希望它发出一个对象，其中包含所有的变化输入。我遇到的问题是，我似乎无法从$emit内部调用watch() (可能是因为上下文，但我也不明白为什么组件范围的上下文不默认传递，也不接受this)。由于同样的原因，我也不能调用任何方法。
我确实看到一些人使用watch: {}语法，但据我所知，这是不可取的，对我来说也没有什么意义。
下面是我想要完成的最简单的例子。无论何时更改输入日期，我都希望组件发出一个自定义事件。
<template>
<input
v-model="date"
浏览 3提问于2021-03-22得票数 2
回答已采纳
$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
1回答
我正在使用带有vue-cli的Vue.js，当前在我的package.json中，在每个脚本之前，我运行clean脚本来清理除app.php和.htaccess文件之外的所有构建文件：
package.json
"scripts": {
"watch": "npm run clean && vue-cli-service build --mode development --watch --no-clean",
"dev": "npm run clean && vue-cli
浏览 129提问于2019-05-21得票数 0
回答已采纳
这并不是特别重要的，但我正在努力学习Vue。
这两个值中使用哪一个有区别吗？他们应该永远是一样的，对吧？
例如：
watch: {
myVar(value) {
console.log('this.myVar, value, this.myVar === value', this.myVar, value, this.myVar === value)
}
}
包括这个论点仅仅是为了方便/可读性吗？或者有什么原因，其中一个会使用其中一个或另一个？
浏览 2提问于2022-09-02得票数 2
2回答
我刚开始使用Vue 3，我正在尝试观察使用Vuex构建的商店的状态变化。
由于某些原因，它不能像预期的那样工作。
<script lang="ts">
import { onMounted, computed, watch } from 'vue';
import { useStore } from 'vuex';
import LineDrawer from '../helper/LineDrawer';
export default {
setup() {
浏览 9提问于2020-11-03得票数 1
我发现VueJS和HTML无序列表元素有一个奇怪的问题。在我的项目中构建的所有文件都没有任何错误，但是在浏览器中，您在页面上看不到任何东西，并且在浏览器控制台中有一个错误。 我有一个修复(参见下面的代码)，但是我很好奇为什么VueJS会抛出这个错误，以及VueJS是如何处理浏览器中的基本列表元素的？因此，我希望有人能向我解释这个问题，以便充分了解这里到底发生了什么。 我正在使用带有Snowpack的Visual Studio 2019来编译 我的html/模板代码： <!-- The code that throws error in the browser -->
<ul
浏览 11提问于2020-07-25得票数 2
我使用的是Vue.js + TypeScript，但我不明白为什么它不能与‘vue-属性装饰器’一起工作。这两条代码的目的是做同样的事情。你能帮我指出我哪里做错了吗？
此代码工作
<script lang="ts">
import Vue from "vue";
import axios from "axios";
export default Vue.extend({
name: "DetailPage",
props: ["id"],
data() {
return {
浏览 5提问于2020-07-08得票数 0
2回答
我在表单中有一个用于的vue组件。我想禁用/启用这两个字段，直到其他两个字段被填充为止。
我已经通过组件内部的总线值访问了这些数据，但是当我尝试使用它时，我从来没有得到一个真实或错误的答案。
我试图用由disabled控制的enableKeywords更新enableKeywords属性，这两个值都来自根或另一个组件，我可以通过Vue dev工具在这个组件的根目录中看到它们的数据更新。
多选择组件
<template>
<div>
<multiselect
v-model="internalValue" tag-placeho
浏览 6提问于2017-04-26得票数 1
回答已采纳
1回答
我有一个带有两个子组件的父组件，我需要在它们之间移动数据。我可以将数据从一个子组件(multiselect.vue)发送到父组件，但不能将其转移到另一个子组件(render.vue)中。我怀疑这和v-model有关。下面是一个简化的版本。
父组件
<template>
<div>
<multiSelect v-model="content" />
<renderSplashPage :content="render" />
</div>
</template>
&l
浏览 35提问于2018-10-09得票数 2
更新：
通过更改resetArray，我在MCV中达到了预期的行为。
function resetArray() {
// myArray.value = [] // old version
myArray.value.length = 0 // new version
}
但我还是不明白为什么我的MCV不能工作。
原始帖子：
背景
在我正在构建的应用程序中，我将数据存储在一个ref中，该const myArray = ref([])以对象数组的形式创建。此数组仅通过以下方式进行更改：
myArray.value[index] = {key: value}
myArray.va
浏览 6提问于2022-03-03得票数 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
回答已采纳
采用ZURB基础模板，建设与NPM。
我的default.html布局页面中有以下代码：
<script src="{{root}}assets/js/app.js"></script>
{{#ifpage 'admin'}}
<script src="{{root}}assets/js/single-page/admin.js"></script>
{{/ifpage}}
{{#ifpage 'dashboard'}}
&
浏览 2提问于2016-05-02得票数 1
回答已采纳
我正在拼命地尝试在watch中使用prop (3.2.31，复合API)：
<script lang="ts" setup>
import { toRef, watch } from 'vue'
const props = defineProps({
'trigger-refresh': {
type: String
}
})
const triggerRefresh = toRef(props, 'trigger-refresh')
watch(triggerRefresh, (a, b) =>
浏览 5提问于2022-03-04得票数 0
回答已采纳
2回答
我已经在设置中设置了这个反应性值。
const refValue = ref('foo');
并将watch函数设置为
watch(refValue, function() {
console.log("activaded")
});
如果手动更改值，则不会激活watch函数，
只有在添加更改值的函数时，它才会被激活。
const changeValue = function changedValue() {
console.log("fired");
return refVa
浏览 3提问于2021-04-18得票数 1
回答已采纳
我有一个laravel 8项目，并将laravel-mix升级到v6以支持vue 3。
问题出在vue- createWebHistory 4的路由器
package.json
{
"private": true,
"scripts": {
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options
浏览 11提问于2020-12-02得票数 1
1回答
Vue可组合作用域问题
、、、
我们正在使用Vue 2和Vue composable，并且我们试图创建一个composable，它将公开应用程序首选项： // useApplicationPreferences.ts
import { ref, watch } from '@vue/composition-api'
import { useSetDarkModeMutation, useViewerQuery } from 'src/graphql/generated/operations'
const darkMode = ref(false) // global scope
expo
浏览 15提问于2020-12-04得票数 0
回答已采纳
6回答
虽然在watch模块中有许多高级的使用场景，但是没有关于如何查看组件道具的示例。
在或中也没有提到这一点。
我创建了一个来阐述这个问题。
<template>
<div id="app">
<img width="25%" src="./assets/logo.png">
<br>
<p>Prop watch demo with select input using v-model:</p>
<PropWatchDemo :selec
浏览 7提问于2019-12-01得票数 108
回答已采纳
根据vue3 的说法，默认情况下，观察者应该是懒惰的，而我的则是立即触发的。我有一个父表单，其中我发出一个axios请求从db检索一个类别列表，然后将它们作为支柱数据发送到一个子select2输入(是的，jquery )。
ParentForm.vue:
<template>
<VSelect2 :data="categories" @item-added="getCategories()"/>
</template>
<script>
export default {
name: "Form"
浏览 2提问于2021-02-27得票数 1
3回答
我已经创建了一个带有页面标题(h1)的vue路由器。每个vue路由器链接都有一个元标题。如何动态设置h1页面标题？
我尝试过$emit，但这在我的路由器中不起作用。如何更改页面标题？
const dashboard = {
template: `<div>DASHBOARD</div>`
}
const about = {
template: `<div>ABOUT</div>`
}
const routes = [
{path: '/dashboard', component: dashboard, name:
浏览 0提问于2018-04-24得票数 10
回答已采纳
1回答
我正在一个VueJS应用程序中工作。我想在cPanel中部署应用程序。我正在尝试运行npm run build。我的错误越来越少。
如果运行npm run命令，就会得到以下结果。
如何运行npm run build？
这是我的package.json。
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"wa
浏览 3提问于2022-05-24得票数 1
回答已采纳
我正在处理一个项目，在这个项目中，我需要在路由加载完成后调用一个函数。但是，当使用“watch”功能时，它只在路由更改时加载，但在路由完成加载之前加载。因此，当我尝试运行一个针对页面上的DOM元素的脚本时，这些元素还不存在。Vue Router中有没有什么功能可以让我在运行脚本之前等待所有东西都被渲染出来？
const app = new Vue({
el: '#app',
router,
watch: {
'$route': function (from, to) {
function SOMEF
浏览 1提问于2018-09-24得票数 11
我已经安装了laravel 5.8。要在其中使用vue.js，我运行npm install，然后运行npm run watch。但每次我更改app.js文件时，我都必须运行npm run watch来显示更改。对每一个小的变化都运行这个命令是非常烦人的。
我的一些代码如下所示
<div id="app">
<div class="container">
<articles></articles>
</div>
</div>
.
浏览 18提问于2019-08-09得票数 0
1回答
我将Vue.js与TypeScript和vue-property-decorator结合使用。我想在父组件和子组件之间执行一些双向数据绑定。以下是我想要做的事情的一个简单想法：
父组件
<template>
<progress :is-loaded.sync="isLoaded"/>
</template>
@Component
export default class ParentComponent extends Vue {
get isLoaded() { return Store.getters["isLoaded&
浏览 2提问于2017-11-17得票数 1
3回答
我在一个js文件中有两个组件，文件以const EventBus = new Vue();开头
我想发送两个字符串‘用户名’和‘密码’从第一个组件到第二个组件，但我做不到。我哪里错了？
第一：
Vue.component('log-reg-modal', {
data: () => ({
username: "",
password: "",
}),
watch: {
username: function(){
EventBus.$emit(&#
浏览 4提问于2020-01-01得票数 0
回答已采纳
1回答
从我的webpack.config.js中，我使用loader: 'vue-loader'进入Vue库。
我有两个npm脚本：
"start": "cross-env NODE_ENV=development webpack --mode development",
"build": "cross-env NODE_ENV=production webpack --mode production"
当我运行npm start时，我希望构建Vue的开发版本。当我运行npm run build时，小型化的生产版本。
/
浏览 2提问于2020-04-13得票数 0
1回答
我有一个vue应用程序，我在其中观察数组的变化。这工作得很好。但我不确定如何获取已更改的数组项的索引，因为监视回调只传入旧/新值。
演示：
简化示例：
new Vue({
el: '#demo',
data: {
things: [{foo:1}, {foo:2}]
},
watch: {
things: {
handler: function (val, oldVal) {
alert('a thing changed')
},
deep: true
}
},
浏览 10提问于2019-07-12得票数 3
1回答
我是一个Vue初学者，我有一个问题:我有一个导航条，我想要一些链接(下面显示的“Link2”)来路由到相同的视图，但是每个链接的值都不同(1,2,3)，这样我就可以构建一个旋转木马，根据所选的选项进行更新。
我不想使用像link2/:opt，这样的路径，因为我不能刷新页面，只想将链接选项绑定到视图文件中的值.。
我试图通过在路由器中使用一个元标记来实现这一点，然后在导航栏中对每个选项单击这个元标记进行更新。我的问题是，我无法读取视图中元标记的变化。无论我选择什么选择，我总是得到Link2 - option1.
路由器/index.js
{
path: '/link2
浏览 2提问于2021-02-07得票数 1
回答已采纳
我有以下问题:我有一个带有复选框列表和两个输入的父组件。因此，当这两个输入中的任何一个发生更改时，我需要取消选中所有复选框。如果你能帮我解决这个问题，我将不胜感激。我想更改checkedItem，在孩子中触发watch，然后更新所有孩子，但它不起作用。
parent.vue
<template>
<div class="filter-item">
<div class="filter-checkbox" v-for="item in filter.items">
浏览 0提问于2017-09-23得票数 1
npm运行构建错误！
我尝试了所有解决这个问题的方法，但仍然不能解决这个问题。我多次重新安装npm，但没有得到合适的解决方案(Laravel 8和Vue js)
我的package.json代码
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
浏览 0提问于2021-03-28得票数 1
当使用params时，如何监视存储值的变化？我通常会通过getter这样做，但是我的getter接受一个param，这使得它变得很棘手，因为我没有找到关于这个场景或堆栈Q/A的文档。
(由于演示原因，代码被最小化)我的store.js：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
let report = {
results: [],
};
export const store = new Vuex.Store({
state: {
bro
浏览 1提问于2018-08-25得票数 3
回答已采纳
我正在运行一个Laravel项目，我有一些vue文件需要更改(例如，删除一些东西)，但问题是我将它们从vue文件中删除，但它们仍然出现在网站上。如果我修改任何其他东西，比如welcome.blade或其他任何东西，它都可以工作，但不能使用这个vue文件。
我只在停止项目、运行npm run dev、运行npm run watch --poll并使用php artisan serve重新启动服务器时才让它工作，但当我再次尝试这样做时，它不起作用。
我不知道我是否遗漏了一些明显的东西。请帮助我:)还有，如果我在这里遗漏了一些信息，请告诉我，这样我就可以发布它，这样别人就可以帮助我了。谢谢!
这是我
浏览 25提问于2020-02-21得票数 0
我读过关于store.watch()的文章，但是找不到一个有效的例子.
Vuex watch(fn: Function，callback: Function，options?：Object)：函数响应监视fn的返回值，并在值更改时调用回调。fn接收存储的状态作为第一个参数，getter作为第二个参数。接受一个可选的options对象，该对象接受与Vue的vm.$watch方法相同的选项。若要停止监视，请调用返回的unwatch函数。
我有一个Vuex操作，用于用户登录Firebase
signUserIn ({commit}, payload) {
commit(types.SET
浏览 2提问于2018-06-19得票数 3
回答已采纳
1回答
我有一个包含布尔值的vue.js存储，我需要检测组件内部的变化情况。当userEnabled发生变化时，我需要在组件中调用一个方法。我不需要计算新的值。
我的问题是，我应该为此使用'watch'，还是有更有效的方法？如果是这样的话，我应该在“挂载”内配置手表吗？
store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state : {
userEnable
浏览 0提问于2018-09-02得票数 2
回答已采纳
我在对象内部有数组
Vue.component('greeting', {
template: '<button @click="cool">getdate! </button> ',
data :function () {
return {
message:"15/10/1999",
}
},
methods:{
cool(){
this.$parent.in
浏览 0提问于2018-12-18得票数 1
回答已采纳
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回答
我想知道是否有任何方法激发自定义函数--一个函数在复选框更改为真值时，另一个函数更改为假值(不使用$watch)。
例如:我的输入封装在根div中。
<div id="root">
<input type="checkbox" v-model="editModeOn">
</div>
和一个带有disableEditMode (未选中的复选框)和enableEditMode (选中的复选框)的vue实例。
new Vue({
el: '#root',
props: {
浏览 2提问于2017-09-25得票数 1
回答已采纳
1回答
我是Vueniverse的新手(使用Vue.js 2)，我正在与watch做斗争。在mounted上，我调用一个API并将单选按钮设置为从API获得的值，因此基本上我有两个带有1和0 (true/false)值的单选按钮。
我认为观察者的工作是正确的，因为它确实会在值被更改时触发。但是，我不希望它触发最初的更改--这是我第一次从后端设置值的时候。
我尝试过使用不同的生命周期挂钩，比如beforeCreated、created等等，它总是触发。
也许这件事很容易做，但我不知道如何在互联网上找到信息(可能使用了错误的关键字)。
守则：
import axios from "axios
浏览 1提问于2021-06-15得票数 1
回答已采纳
2回答
我的JSON数据是这样的，这是早些时候保存在vue的js文件中的，从那里访问它，我希望我的html v-for:条件可以工作，因为它之前工作得很好。我在Vue js的文档中尝试了这个方法，但它不能获取json数据并执行它，如果有人可以的话，请帮助我。 variants: [
{
variantId:501,
variantImage: 'assets/images/demo_watch_1.png',
variantname: 'alpha'
浏览 9提问于2020-01-03得票数 0
回答已采纳
1回答
我正在尝试将这个软件包安装到我的laravel + vue项目中。使用laravel编译后，出现了以下错误：
模块未找到:错误:无法解决‘\node_node\vue\scrollin\dist’中断更改中的“计时器”：默认情况下webpack <5用于包含node.js核心模块的多填充。现在情况不再是这样了。验证是否需要此模块，并为其配置一个多填充。如果您想要包含一个多填充，您需要：-添加一个回退'resolve.fallback：{“计时器”：require.resolve(“计时器-浏览器”) }‘-安装’定时器-浏览器‘如果您不想包含一个多填充，您可以使用一个空模块:
浏览 1提问于2021-03-29得票数 3
回答已采纳
我使用腻子连接到一个立方体卡车板，其中有扶手debian软件。我想看一个应用程序的彩色直播日志。我遵循下面的示例。
当我使用命令时：
tail -f app.log | ccze
效果很好。同样，当我使用命令时：
watch `tail -f app.log`
效果也很好。然而，当我给出：
watch --color 'tail -f app.log | ccze'
或
watch -c 'tail -f app.log | ccze'
我得到了很多
(B )
在大多数情况下，没有新的行被识别，而且看起来是无缝的文本。我假设与颜色相关的ASC
浏览 0提问于2018-06-13得票数 1
回答已采纳
我读了，但我还是不能理解。
我知道data、computed、watch、methods是做什么的，但是nextTick()在Vue.js中用来做什么呢？
浏览 0提问于2017-12-04得票数 148
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
