用空字符串Vue替换NULL值

Question

有什么方法可以用vue中的空字符串替换显示的null值？

<template>
<div class="flexItem">
      <ui-textbox label="Address" v-model="customer.address"
          :disabled="disabled"
          name="address"
          @input="update()"
          v-validate="'max:255'"
      ></ui-textbox>
</div>
</template>

export default{
name: 'customer',
props:{
    value:{
        type:Object,
        required:true,
    },
    disabled:{
        type:Boolean,
        default:false,
    }
},
data(){
    return {
        customer:{
            address:"",
        }
    },
methods:{
    update(){
        this.$emit('input',this.customer);
    },
}

显示值现在为null，但我希望将其替换为空字符串。

我有什么方法可以做到吗？

Answer 1

你得到的是Null，因为它没有与子组件正确绑定。对于任何组件都不应该v-model，也不应该:value绑定参数以使其成为数据子组件，这里ui-textbox 。我评论过像这样分享现场演示，试试这样做是为了让你的代码工作

＆＃13;

＆＃13;

Vue.component('ui-text', {
	template:`<div><input type="text" v-model="customer.name "/>
      <input type="text" v-model="customer.address" /></div>`,
  props:["customer"],
  data(){
    return {
        customer:{
            name:"",
            address:"",
        }
    }
  }
});
Vue.component('mycomp', { 
template: 
`<div>
All Records
<div class="flexItem">
      <div class="row" v-for="customer in customers"><ui-text :customer="customer"></ui-text></div>
</div>
</div>`,
		props:["customers"],
data(){
    return {
        customers:[{
            name:"",
            address:"",
        }]
    }
  }
});

new Vue({
  el: '#app',
  data: {
    customers: [{name:'test1',address:'new address1'},{name:'test2',address:'new address2'},{name:'test3',address:'new address3'}],
  }
})

＆＃13;

.flexItem{
  border:2px solid green;
  padding:10px;
}
.row{
  border:1px solid red;
  margin:5px;
}

＆＃13;

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
<mycomp :customers="customers"></mycomp>
{{customers}}
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为这将迫使您转储v-model并分别对绑定的两面进行编码。所以......

<ui-textbox 
    :value="customer.address || ''" 
    @input="customer.address = event.target.value"
    ...