Блог

Главная - Вопросы по программированию - несовместимое поведение v-модели и вычисляемого свойства

несовместимое поведение v-модели и вычисляемого свойства

#javascript #vue.js

#javascript #vue.js

Вопрос:

например, у меня есть компонент, подобный этому

 var App = {
  data() {
    return {
      mobileCode: ' 62',
      mobile: ''
    }
  },
  computed: {
      mobileFormat: {
          get: function () {
              return this.mobileCode   this.mobile
          },
          set: function (newValue) {
          	if (newValue.length < this.mobileCode.length) {
            	this.mobileCode = this.mobileCode
            }
             this.mobile = newValue.substr(this.mobileCode.length)
          }
     }
  }
}  
 <div id="app">
  The variable enteredValue is {{mobile}}
  <br>
  The variable enteredValue is {{mobileFormat}}
  <el-input v-model="mobileCode"></el-input>
  <el-input v-model="mobileFormat"></el-input>
</div>

проблема в том, что когда я удаляю значение внутри входных данных, я надеюсь, что я не смогу удалить часть mobileCode (‘ 62’).
Значение внутри входных данных изменилось, но сами данные не изменились.
Существует ли какое-либо обходное решение этой проблемы (с использованием vue)?
Является ли эта проблема проблемой?

Комментарии:

1. Чего именно вы хотите.. можете ли вы поделиться примером ввода / вывода?

2. Я хочу добавлять mobileCode во второе поле ввода каждый раз, когда я его редактирую. И я не хочу удалять mobileCode внутри поля ввода. Вот JSFiddle jsfiddle.net/grxfatp5/4

3. Как насчет применения некоторой маски? Для этого есть несколько библиотек vue

4. Для меня это звучит как сбой технического дизайна, а не проблема с кодированием. Какова ваша точная цель?

5. Я нашел обходной путь. jsfiddle.net/grxfatp5/5 Это то, в чем заключается моя цель. Есть ли какое-либо другое решение?