Vuejs2 Vue:v-model未定义或默认/回退
如果输入字段为空,是否可以将输入的默认值设置为另一个输入字段的值。 看起来我无法在数据或v-model属性中指定:Vuejs2 Vue:v-model未定义或默认/回退,vuejs2,vue-component,Vuejs2,Vue Component,如果输入字段为空,是否可以将输入的默认值设置为另一个输入字段的值。 看起来我无法在数据或v-model属性中指定: <template> <div> <input type="number" v-model="font1 || 14"> <!-- gives error --> <input type="number" v-model="font2 || font1"> <!-- gives
<template>
<div>
<input type="number" v-model="font1 || 14"> <!-- gives error -->
<input type="number" v-model="font2 || font1"> <!-- gives error -->
<input type="number" v-model="font3 || font1"> <!-- gives error -->
</div>
</template>
<script>
export default {
data() {
return {
font1: 14,
font2: this.font2 || this.font1, // this approach also gives error
font3: this.font3 || this.font1 // this approach also gives error
}
}
}
</script>
导出默认值{
数据(){
返回{
font1:14,
font2:this.font2 | | this.font1,//这种方法也会产生错误
font3:this.font3 | | this.font1//这种方法也会产生错误
}
}
}
欢迎任何帮助。
谢谢。您可以将
输入1
和输入2
元素的布尔值设置为false,并在输入值时将其更新为true
newvue({
el:“#应用程序”,
数据:{
font1:14,
font2:{
价值:14,
定义:false
},
font3:{
价值:14,
定义:false
}
},
方法:{
Chg(字体){
if(font.value.length){
font.defined=true;
回来
}
font.value=this.font1;
}
},
观察:{
font1(){
如果(this.font2.defined==false)this.font2.value=this.font1
如果(this.font3.defined==false)this.font3.value=this.font1
}
}
});代码>
您可以将输入1
和输入2
元素的布尔值设置为false,并在输入值时将其更新为true
newvue({
el:“#应用程序”,
数据:{
font1:14,
font2:{
价值:14,
定义:false
},
font3:{
价值:14,
定义:false
}
},
方法:{
Chg(字体){
if(font.value.length){
font.defined=true;
回来
}
font.value=this.font1;
}
},
观察:{
font1(){
如果(this.font2.defined==false)this.font2.value=this.font1
如果(this.font3.defined==false)this.font3.value=this.font1
}
}
});代码>
您必须结合使用v-model
和计算属性的getter和setter来实现您想要的功能
声明字体的内部数据存储,让我们调用f1
、f2
和f3
。给f1
您的默认值14:
data: function() {
return {
f1: 14,
f2: null,
f3: null,
};
}
现在,当安装组件时,您需要相应地插值这些值。这可以在vm.mounted()
回调中完成:
mounted: function() {
// f2 takes the value of f1, if itself is falsy
this.f2 = this.f2 || this.f1;
// f3 takes the value of f2, if itself is falsy
this.f3 = this.f3 || this.f2;
}
最后一步是设置计算属性,以便无论何时font1
、font2
或font3
发生更改,它们都会相应地更新内部字体数据存储:
computed: {
font1: {
set: function(val) {
if (val)
this.f1 = val;
},
get: function() {
return this.f1;
}
},
font2: {
set: function(val) {
this.f2 = val || this.f1;
},
get: function() {
return this.f2;
}
},
font3: {
set: function(val) {
this.f3 = val || this.f2;
},
get: function() {
return this.f3;
}
}
}
见下面的概念证明:
Vue.component('test'){
模板:“#测试”,
数据:函数(){
返回{
f1:14,,
f2:空,
f3:空,
};
},
挂载:函数(){
this.f2=this.f2 | | this.f1;
this.f3=this.f3 | | this.f2;
},
计算:{
font1:{
设置:功能(val){
if(val)
这1.f1=val;
},
get:function(){
返回此文件。f1;
}
},
font2:{
设置:功能(val){
this.f2=val | | this.f1;
},
get:function(){
返回此值。f2;
}
},
font3:{
设置:功能(val){
this.f3=val | | this.f2;
},
get:function(){
返回此文件。f3;
}
}
}
});
新建Vue({el:'\35; app'})代码>
您必须结合使用v-model
和计算属性的getter和setter来实现您想要的功能
声明字体的内部数据存储,让我们调用f1
、f2
和f3
。给f1
您的默认值14:
data: function() {
return {
f1: 14,
f2: null,
f3: null,
};
}
现在,当安装组件时,您需要相应地插值这些值。这可以在vm.mounted()
回调中完成:
mounted: function() {
// f2 takes the value of f1, if itself is falsy
this.f2 = this.f2 || this.f1;
// f3 takes the value of f2, if itself is falsy
this.f3 = this.f3 || this.f2;
}
最后一步是设置计算属性,以便无论何时font1
、font2
或font3
发生更改,它们都会相应地更新内部字体数据存储:
computed: {
font1: {
set: function(val) {
if (val)
this.f1 = val;
},
get: function() {
return this.f1;
}
},
font2: {
set: function(val) {
this.f2 = val || this.f1;
},
get: function() {
return this.f2;
}
},
font3: {
set: function(val) {
this.f3 = val || this.f2;
},
get: function() {
return this.f3;
}
}
}
见下面的概念证明:
Vue.component('test'){
模板:“#测试”,
数据:函数(){
返回{
f1:14,,
f2:空,
f3:空,
};
},
挂载:函数(){
this.f2=this.f2 | | this.f1;
this.f3=this.f3 | | this.f2;
},
计算:{
font1:{
设置:功能(val){
if(val)
这1.f1=val;
},
get:function(){
返回此文件。f1;
}
},
font2:{
设置:功能(val){
this.f2=val | | this.f1;
},
get:function(){
返回此值。f2;
}
},
font3:{
设置:功能(val){
this.f3=val | | this.f2;
},
get:function(){
返回此文件。f3;
}
}
}
});
新的Vue({el:'#app'})代码>
可能有37种不同的方法
问题是什么是重要的,健壮性、可维护性、易实现性、可伸缩性等等
这是一个优先考虑易于实施的解决方案。它依赖于使用@change
和:value
而不是v-model
magic
这将使font2
和font3
保持为空(如果未更改)
newvue({
el:“#应用程序”,
数据:{
font1:14,
font2:null,
font3:null,
},
方法:{
isNumber(n){return!isNaN(parseFloat(n))&&!isNaN(n-0)}
}
});代码>
{{{font1:font1,font2:font2,font3:font3}}
可能有37种不同的方法
问题是什么是重要的,健壮性、可维护性、易实现性、可伸缩性等等
这是一个优先考虑易于实施的解决方案。它依赖于使用@ch