Vue: v模型的数字选择器不反映更改的值
Vue.js是一种流行的前端JavaScript框架，用于构建交互式的Web界面。它采用了MVVM（Model-View-ViewModel）架构模式，通过数据绑定和组件化的方式使得开发更加简单高效。
在Vue.js中，v-model是一个指令，用于实现表单元素和Vue实例数据的双向绑定。当表单元素的值发生变化时，Vue实例的相应数据也会跟着变化，反之亦然。
对于数字选择器不反映更改的值这个问题，可能是由于某些原因导致双向绑定失效。解决这个问题的方式可以有以下几种：
- 检查是否正确绑定了v-model指令：确保v-model绑定在正确的表单元素上，并且与Vue实例中的数据属性进行了正确的绑定。
- 检查数据属性的类型：Vue.js的双向绑定是基于JavaScript的数据类型进行的，确保数据属性的类型和数字选择器的值类型相匹配。
- 检查事件监听：如果数字选择器使用了自定义事件或者第三方插件，确保正确监听事件并更新Vue实例中的数据。
- 检查依赖关系：如果数字选择器的值依赖于其他数据属性，确保这些依赖关系已正确设置。
如果以上方法仍然无法解决问题，可以考虑使用Vue.js提供的计算属性或者自定义指令来实现双向绑定。计算属性可以通过对表单元素的值进行计算，并返回新的值，从而实现双向绑定。
另外，腾讯云提供了一系列与Vue.js开发相关的产品和服务，例如：
- Serverless Cloud Function（SCF）：提供无服务器云函数服务，可以用于处理Vue.js应用程序的后端逻辑，更多信息请参考腾讯云Serverless云函数（SCF）
- 腾讯云对象存储（COS）：用于存储Vue.js应用程序中的静态资源，如图片、音视频等，更多信息请参考腾讯云对象存储（COS）
这些产品可以帮助开发者构建高性能、稳定的Vue.js应用程序，并提供丰富的功能和服务支持。
相关·内容
目前，我有一个VueJS应用程序，你可以点击一个按钮来创建一组两个输入。这两个输入在key up上执行一个简单的数学函数。这些数学函数使用一组输入。但是，由于我使用document.getElementById来获取输入，所以它只对第一组输入有效。有没有什么方法可以唯一地识别每组输入，这样我就可以单独执行这个数学函数？
示例：
Vue.component('product', {
template: `
<div>
<select>
<option>Product One</option>
浏览 0提问于2017-04-12得票数 3
回答已采纳
我在我的公用html文件夹中导入cdn中的选项卡图标：
<link rel="stylesheet" href="https://unpkg.com/@tabler/icons@latest/iconfont/tabler-icons.min.css">
根据Vuetify文档，引入图标库(在plugins/vuatefy.js中)：
export default new Vuetify({
icons: {
iconfont: "ti",
}
这允许我在<v-icon>ti-pencil&
浏览 6提问于2022-04-22得票数 0
回答已采纳
我刚刚开始使用Vue.js，我只是遇到了v-model部分，下面是代码：
HTML：
<div id="app"> <p> {{message}} </p> <input v-model="message" id="input_id"> </div>
javascript：
var v = new Vue({
el:"#app",
data:{
message: "Hello"
}
});
var inputDOM = doc
浏览 2提问于2016-12-12得票数 1
回答已采纳
我试图验证一些输入数据(例如数字)在一个输入标签连接到一些数据通过v-模型。
问题是，如果我有无效的数据(例如"1e")，数据将是"“。显然，空输入也是如此。
如何区分空输入和无效输入？
var app = new Vue({
el: "#app",
data: {
budget: "",
},
methods: {
updateBudget() {
// do some input validation here. E.g.
if (this.budget === "&
浏览 5提问于2020-11-21得票数 1
回答已采纳
我相当肯定这是一个非常简单的问题，但我花了大约3个小时试图弄清楚，但没有结果。如果我在Vue对象中绑定一个变量，即data: {x: a}，其中a是一些变量，然后我改变了a的值，我的印象是它也会改变data.x的值，不是吗？
我目前正在尝试一个包含不平等的if语句的v-if/v-else链，但是即使在它应该计算为true之后，显示的内容也不会改变。我编写了一些示例代码，并编写了一个JSFiddle。
<div id="app">
<button v-if="unlocked">
Unlocked
</button&g
浏览 0提问于2019-05-16得票数 3
回答已采纳
3回答
我在一个Vue.js组件中有一个输入，我需要使用jquery覆盖它。我需要使用jquery填写一个输入的电子邮件地址。当我按下“填写电子邮件”时，jQuery将填充电子邮件输入。但是当我使用V模型时，它不会被更新。有办法解决这个问题吗？
下面是一个实用的示例
这是HTML
<button id="push-email">Fill in email</button>
<br><br>
<div id="root">
<label for="name">Name</la
浏览 5提问于2017-11-21得票数 0
回答已采纳
1回答
我在vue.js项目中添加了一个datepicker组件： Vue.component('d_picker', {
data() {
return {
pickerOptions: {
shortcuts: [{
text: 'Today',
onClick(picker) {
picker.$emit('pick', new Date());
}
浏览 12提问于2020-09-16得票数 0
回答已采纳
1回答
嗨，我有vuejs2代码和拉拉刀片..。现在我的问题是我有这个vuejs2代码
new Vue({
el:'.add_item_to_price_menu',
data:{
percentage:null,
},
methods:{
searchData:function(){
console.log(this.percentage);
}
}
});
这是我的刀片密码
<input type='text' @keyup='searchD
浏览 1提问于2019-03-04得票数 0
回答已采纳
--这是我的 app.js 文件，其中的响应显示在控制台上，但它提供了错误。我不知道为什么
require('./bootstrap');
window.Vue = require('vue');
Vue.component('posts', require('./components/posts.vue'));
const app = new Vue({
el: '#app',
data:{
blog:{},
},
mounted(){
axi
浏览 5提问于2017-10-19得票数 0
回答已采纳
我使用Vue 3和Vuex 4，当我打开这个模型时，主对象(car)变成了默认对象，这些默认值填充了这个模式的形式。下面的代码是简化的版本。
Vuex模块：
state: {
car: {}
defaults: {
brand: "",
color: "",
value: ""
...
}
},
actions: {
fillTheCar(state, commit) {
commit("SET_CAR", state.
浏览 1提问于2020-10-03得票数 1
回答已采纳
1回答
我得到了一个v-for在我的vue js应用程序中发布我所有的gif，当我在我的输入中写一条注释时，它写在所有gif的所有输入中，我想只关注gif输入问题。 ? ?
浏览 14提问于2021-10-29得票数 0
在vue + vuetify中，我有多个复选框链接到一个v-模型数组。问题是，当我对它循环的数组排序时，复选框的值会发生变化，这不是我想要的行为。我想把它的价值保存下来。下面是一个例子
HTML
<div id="app">
<v-app id="inspire">
<v-container class="px-0" fluid>
<v-btn @click="FullRefresh" color="primary">
浏览 0提问于2021-06-08得票数 0
回答已采纳
4回答
我一直在尝试了解Vue的v-model如何与自定义输入和常规输入组件一起工作。
我见过v-model绑定到组件和模板中的值的示例，这两个值将是不同的。我对此感到非常困惑，我认为这可能是对“双向绑定”的误解。如何将输入绑定到两个值。
示例：
//v-模板中的model
const myCustomInput = ('my-custom-input', {
data() {
return {
myObj: 'hello'
}
},
template: `<input v-model="myObj" >
浏览 2提问于2019-09-16得票数 1
我遇到了一个vue滑块组件的问题
下面的页面是我当前的测试模块
template:`
<div>
<vue-slider
v-model="value"
:order="false"
:tooltip="'always'"
:process="false"
:marks="marks"
:width="600"
ref="nodevalue"&
浏览 28提问于2019-11-14得票数 0
回答已采纳
2回答
更新模糊输入的Vue指令
、、、
我正在尝试实现一个指令，该指令将减少对blur事件的输入值：
import { DirectiveOptions } from "vue";
const Autotrim: DirectiveOptions = {
inserted(el) {
if(!(el instanceof HTMLInputElement) && !(el instanceof HTMLTextAreaElement)) {
throw 'Cannot apply v-autotrim directive to a non-in
浏览 2提问于2019-10-28得票数 3
回答已采纳
1回答
我读过"v-model指令将Vue实例的数据属性作为唯一的真理源，而不是HTML属性“？我有点糊涂。这是否意味着在Vue组件中，只有与v-模型绑定的数据在处理数据时才会被考虑，如果在html属性中赋值，则不考虑它？
浏览 1提问于2021-04-21得票数 0
2回答
我用的是Vue，Vuetify，Vue-Router和Vuex的项目。其目的是在更模块化的方法中创建一个带有侧栏的基本布局，以便使用Vue实现可伸缩性。所以我创建了一个名为Store的文件夹，其中有一个模块文件夹。因此，存储文件夹中的索引文件如下所示：
import Vue from 'vue';
import Vuex from 'vuex';
import global from './Modules/Global';
Vue.use(Vuex);
export default new Vuex.Store({
modules:
浏览 3提问于2018-03-01得票数 1
回答已采纳
我有一个Vue应用程序，它的输入元素绑定到如下所示：
<template>
<input v-model="this.$store.state.myvalue"/>
</template>
和VueX store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
myvalue: null
},
mutati
浏览 4提问于2019-11-30得票数 3
回答已采纳
1回答
我真的在尝试理解，当我的vue模型被jquery中的datepicker更改时，我如何将值绑定到它。我有一个代码笔来显示我在这里谈论的内容：
<div id="app">
<input id="datepicker" v-model="date">
</div>
值发生了明显的变化，但模型没有更新。我是vue的新手，并不真正了解如何让它与其他库一起工作。请帮帮忙。
谢谢
浏览 1提问于2017-12-25得票数 1
回答已采纳
我第一次使用Vue，为什么我的Vue对象在数据更改时不断更新，而另一个Vue对象不更新。
我有这样一个JavaScript模块，基本上只保存数据：
var MyModule = (function(){
const info = {
requestCount: 20,
arrayOfItems: []
}
return info;
})();
我有这个html：
<span id='requestCounter' class='badge'>{{count}}</span>
&
浏览 2提问于2017-03-24得票数 1
回答已采纳
2回答
有了vue ui，用Babel和Lint创建了一个基本的新项目，我安装了deps vuetify、vuetify loader和vue-bootstrap。所有我想要的是一个简单的‘打开对话框’按钮，它打开一个单独的组件(文件)中定义的对话框。该对话框显示，没有出现问题/警告，但当我关闭它时(通过单击其他地方或单击其中一个按钮，我得到了一个警告：“避免直接更改属性，因为只要父组件重新呈现，该值就会被覆盖。”再次单击该按钮将不再起作用。尽管控制台中显示了"JAAA“。代码：
HelloWorld.vue
<template>
<div class="hell
浏览 3提问于2019-10-23得票数 2
我有一个使用bootstrap-vue下拉菜单的BaseDropdown组件。下面是BaseDropdown.vue (子组件)的代码
BaseDropdown.vue
<template>
<div>
<slot></slot>
<b-dropdown :text="text">
<b-dropdown-item v-for="option in options" :key="option.id" @click="text =
浏览 13提问于2021-03-03得票数 0
我有一个vue date组件，它由一个vue-flatpickr组件组成。当然，当我将配置选项作为props传入时，它们会按预期工作，但是，如果想要更改其中一个配置选项(这应该是可能的)，它不会向下传播。我不是Vue大师，任何建议都会有帮助。 我使用的是Laravel应用程序中的页面组件，它不应该是相关的，但是，以防有人用vuex或vue-router回答，这些在这里不起作用。 以下是page.vue提供的表单元素： <material-select
name="specialist"
label="Specialist"
def
浏览 39提问于2019-05-04得票数 1
2回答
我正在尝试实现vue2 modal，如的vue文档中所描述的那样。
看起来是这样的：
<tbody v-if="fields.length">
<tr v-for="(item, index) in fields">
<td>@{{ item.name }}</td>
<td><input type="checkbox" id="checkbox" v-model="item.active"></t
浏览 0提问于2018-03-21得票数 0
回答已采纳
我有一个带有一些输入的表单，我提交表单并以一个模式显示数据。它可以工作，但我不确定我这样做是正确的，而且代码看起来很混乱。
--这是的样子(为了简单起见，没有模型)：
<div id="app">
<form @submit.prevent="getValues">
<label>Last Name: </label><input type="text" name="lastName">
<br>
<button>Sub
浏览 7提问于2020-02-10得票数 2
回答已采纳
我试图弄清楚keydown和change事件是如何在Vue.js (Vue 3)中一起工作的。设置非常简单。我在组件中有一个文本输入，我希望能够在文本输入字段中输入一个数字。在这里，我希望能够使用箭头键(向上和向下)来增加或减少输入中的值。当输入失去焦点时，它应该触发@change，然后更新模型。
我遇到的问题是，当我使用@keydown更新输入中的值时，它的行为方式与可打印字符的按键不同。更新@keydown上的值不会导致控件失去焦点时触发@change事件。
我在中设置了一个示例，如果这有帮助的话，但是下面是代码：
App.vue
<script>
import NumberI
浏览 38提问于2022-04-08得票数 1
回答已采纳
2回答
我有一个Vue.js text-input组件，如下所示： <template>
<input
type="text"
:id="name"
:name="name"
v-model="inputValue"
>
</template>
<script>
export default {
props: ['name', 'value'],
浏览 24提问于2019-05-21得票数 1
我正在VueJS中创建一个组件递归树。在我的item组件中有这样的行：
<item v-for="i in items" v-model="i"></item>
它很好，但是Vue给了我这个警告：
您正在将v模型直接绑定到v-for迭代别名。这将无法修改v源数组，因为写入别名就像修改函数局部变量一样。考虑使用对象数组，而不是在对象属性上使用v模型。
我对这个警告感到困惑，因为我的应用程序似乎运行良好--我可以添加、移动和删除项目树中的节点。这条错误信息是怎么回事-我该担心吗？
浏览 3提问于2017-03-16得票数 1
2回答
我有一个自定义组件，它接受modelValue支持并发布update:modelValue事件。在父组件中，我传递一个数组：
TestComponent.vue
<template>
<div>
<button @click="updateIt">Test</button>
</div>
</template>
<script>
export default {
props: {
modelValue: Array
},
emits: [
浏览 3提问于2021-11-24得票数 3
回答已采纳
根据要显示的内容，我使用Vue的动态组件加载组件。由于这些组件都有不同的支持，所以我构建了一个对象并通过v绑定传递它，这取决于我需要从原始状态模型中使用什么。
然而，当我这样做时，我就失去了Vue的支持数据流的反应性。下面的代码示例展示了一个在标准组件上更改名称而不是在动态版本上更改名称的示例。
我希望这与复制到新对象中的字符串值有关，而不是对原始反应性属性的引用。有人能给我建议一下我怎样才能像预期的那样做这件事吗？
Vue.config.productionTip = false;
Vue.component("example-component", {
pro
浏览 0提问于2019-04-18得票数 5
回答已采纳
3回答
我有一个Keyboard.vue组件，包含许多Key.vue子组件实例(每个键一个)。
在Key.vue中，键实际上是一个可以禁用的html <button>元素。
通过单击应用程序中的某个按钮，我希望重新设置键盘并再次启用所有键。我认为将v-if设置为false然后再设置为true (<keyboard v-if="BooleanValue" />)将重新呈现Keyboard.vue及其所有Key.vue子组件实例。
没有。为什么不呢？
App.vue
<template>
<div class="app">
浏览 18提问于2019-11-08得票数 3
回答已采纳
1回答
在vue js中，我想得到2个日期选择器的结果，并得到它们之间的不同日期，但问题是，我想在表单提交之前做这件事，我的意思是，当用户选择日期时，我想计算天数并根据它给出价格，我使用波斯日期选择器，我添加到下面，如果它可能有帮助的话： https://github.com/talkhabi/vue-persian-datetime-picker 下面是我的html标记： <div class="row">
<div class="col-lg-6">
<label
浏览 173提问于2019-03-29得票数 4
回答已采纳
2回答
我使用Vue 2.6.9和新的v槽语法。我想要访问与v-模型内插槽的交互。问题是，在插槽内显示数据是可行的，但使用v-模型则不行。这是我的代码：
Vue.component('base-test', {
template: `
<div>
<slot :foo="foo" :foo2="foo2"></slot>
</div>
`,
data(){
return{
foo: 'Bar',
foo2: 'Bar 2&#
浏览 1提问于2019-03-17得票数 4
这太奇怪了。当我在顶层定义布尔属性showModal时，它只是被vue.js忽略了。以下是我正在做的事情：
//Component:
export default {
props:['rating', 'showModal'],
data: function data () {
return {
rating: this.rating,
showModal: this.showModal
};
}
};
引用该视图：
const sharedRating = {
title: '',
r
浏览 6提问于2017-07-18得票数 3
回答已采纳
1回答
我在输入字段中使用vue-date-picker进行日期选择器功能，因为它与我的需求100%匹配。问题是它可以工作，但是在加载页面时，我要从数据库中传递一个默认值。但在我删除v-model属性之前，它不会向我显示这个值。
当我删除这个属性时，它没有更新从datepicker日历中选择的日期。
下面是我在html中使用的代码
<input type="text" id="regular-date" class="form-control w-p100" placeholder="eg. 21 August, 2018" rea
浏览 0提问于2018-09-07得票数 1
回答已采纳
2回答
父级更新vuejs时不更新子组件
、、、、
我有一个vue实例，它将一个对象传递给一个子组件。子组件有一个复选框，单击该复选框时，该复选框将调用vue实例处理的事件，以更新传递给子组件的父组件上的对象。基于，我认为这会导致子组件更新相关字段。但是，日期字段并不像我单击复选框时所期望的那样正在更新。在下面的图片中，当我选中“管理名称”复选框时，我希望当前日期会出现，但我没有看到任何日期。我在这里错过了什么？
设计
父实例
new Vue({
el: "#evaluations-app",
data: {
evaluation: new Evaluation()
浏览 3提问于2017-07-25得票数 2
回答已采纳
我从github克隆了项目并在VM上部署。除了观察项目更新中是否有任何文件外，所有的工作都很好。VagrantFile对syn文件夹有字符串
config.vm.synced_folder './', '/app', owner: 'vagrant', group: 'vagrant'
尝试使用添加vue.config.js
module.exports = {
configureWebpack: {
devServer: {
watchOptions: {
ignored: ['node_mod
浏览 2提问于2018-11-21得票数 1
2回答
我正在使用Vuetify选择器输入组件v-select，并且我想定制它的样式。由于这个组件只使用一个v-select呈现，并且在html中没有必要的子元素，所以我转向通过检查chrome并在那里复制类来对组件进行样式化。例如，要更改活动值的字体大小，我使用：
.v-select__selections {
font-size: 20px;
}
这很好，直到我意识到我的风格在(通常是隐藏的)导航抽屉的任何部分上都不起作用。例如,
.v-menu__content {
height: 500px;
}
不会以任何方式影响样式。奇怪的是，这不仅仅是我的风格被Vuetify风格所覆盖(
浏览 0提问于2018-08-10得票数 5
回答已采纳
2回答
不太确定Node.js和NPM最近发生了什么变化(即最近几天)，但是我似乎找不到一种方法来安装node_modules依赖于任何在Windows 10上使用Node.js的项目.
我目前的设置如下：
Node.js: v9.5.0 NPM: v5.6.0 Vue.js: v2.9.3
我已经尝试过在安装前清除缓存：npm cache clear -f
每当我试图运行npm i或npm install时，都会出现以下错误列表：
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fseven
浏览 2提问于2018-02-14得票数 2
2回答
我正在学习Vue，并尝试测试如何将用户输入从一个函数传递到另一个函数。
我的用例是这个。我希望接受用户输入，存储它，然后将它作为一个变量提供给第二个函数，它可以用来进行API调用。
单独地，这两个代码部分是：
用户输入
<div id="v-model-basic" class="demo">
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
</div&
浏览 2提问于2021-11-18得票数 4
回答已采纳
我是一个新鲜的vue.js，并试图为我的选择框创建一个组件。我很难通过父组件将默认值传递给select。
现在，我在父组件中有这个
<div class="row">
<div class="col-md-4">
<active-dropdown :selected='selected', :options = 'active_options', @update = 'update_selected'></active>
</div>
&l
浏览 4提问于2016-10-28得票数 2
回答已采纳
1回答
我为输入收音机创建一个组件，如下所示
<template>
<input
:id="id"
ref="radio"
type="radio"
:name="name"
@change="$emit('input', value)"
/>
</template>
<script lang="ts">
import Vue from 'v
浏览 7提问于2022-11-15得票数 0
1回答
我的html代码如下：
<div id="app">
<input type="number" v-model="quantity"/>
</div>
我的vue组件如下：
new Vue({
el: '#app',
data: {
quantity: ''
},
watch: {
quantity (val) {
this.quantity = val.replace('.', '')
}
浏览 7提问于2017-10-09得票数 2
回答已采纳
Vue支持使用lazy修饰符对模型进行延迟绑定。
<input v-model.lazy="value" />
现在，直到输入失去焦点，模型才会更新。但是，如果我将类型更改为Number并使用箭头键设置值，则模型将在输入有焦点时进行更新：
<input type="number" v-model.lazy="value" />
是否有一种(容易)的方式来延迟绑定直到焦点丢失？
浏览 4提问于2021-12-09得票数 0
回答已采纳
3回答
我正在为vue2使用。虽然它呈现得很好，并且看起来在基本用法下运行良好，但我无法检测到vue组件中输入值的更改。我尝试将@change添加到组件实例中，尽管它似乎从未触发过。知道为什么会这样吗？注意，v-model成功地更新了cool的值。
Vue方法
export default {
...
methods: {
someEvent() {
alert("SUCCESS"); //this never fires
}
Vue标记
浏览 2提问于2018-01-04得票数 2
在下面的代码中，state只是一个普通的对象，但是更改它的prop：message (同样，只是一个普通的属性)会导致重新呈现。为什么？ const App = {
setup() {
const name = Vue.ref("");
Vue.watch(name, () => state.message = `Hello ${name.value}`);
const state = {
name,
message: "Welcome stranger"
};
return s
浏览 54提问于2021-08-21得票数 0
我卡住了，我不熟悉vue和vuex，当我运行下面的代码时，它给我带来了这个错误。我已经搜索了这里的一些其他问题，但我找不到解决方案 [Vue warn]: Computed property "vat" was assigned to but it has no setter.
found in
---> <BusinessList>
<App> at src/App.vue
<Root> 有人能帮我吗？ 下面的->是包含代码的文件 BusinessList.vue <script>
浏览 193提问于2020-12-06得票数 1
回答已采纳
我想要这样的效果:当我输入一些东西时，vue可以帮助我格式化字符串。
当有人打20160324..。，这个格式可以是“2016-03-24.”同时(所以这个效果必须在一个相同的)，因为我的预期是"2016-03-24 15:00“。
ps：
我的是通过一个对象数组生成动态的，我想知道在每一个项目上写“v模型”的正确方法。
因为我不知道具体是什么，所以我不能用"Vue.$ watch“来看它。
我的数据如下：
data{
form:[
{name:'name',value:'',inputTy
浏览 1提问于2016-03-24得票数 1
回答已采纳
1回答
我试图使用父母的混音作为一个子模型，但我无法使它工作，因为混音没有解决‘数据’的定义。
这里有一把小提琴：
<div id="vue-instance">
<div>
USER: {{user}}
<br/>
EMAIL: {{email}}
</div>
<input-list :field="field" v-for="field in fields"/>
</div>
联署材料：
Vue.compo
浏览 0提问于2018-06-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
