vuejs Вычисляемые данные, определяющие, была ли обновлена ​​модель

Я пытаюсь определить, не были ли изменены данные модели в вычисленных данных Vue.

У меня есть два набора переменных, которые необходимо проверить перед вычислением: отфильтрованные элементы должны возвращать новый список или текущий список.

Ниже приведены два данных, которые я проверяю.

  • текст (ввод текста)
  • selectedInput (текущий выбранный элемент)

Текущее поведение:

Я изменил selectedInput на null, это обновляет Computed: filterList, чтобы сработать. что и ожидается.

Первое условие - убедиться, что это обновление возвращает текущий список, если text === selectedInput.text работает должным образом.

Однако мне нужно второе условие, чтобы определить, не изменился ли текст.

<input v-model="text" />
<ul>
   <li v-for="item in filteredItems" @click="text=item.text"></li>
</ul>

{
  data():{
     text: 1,
     items: [],
     tempList: [],
     selectedItem: {text: 1}
  },
  computed: {
     filteredItems(){
        // when selectedItem.text === current text input, do not run
        if (this.selectedItem.text === text) return this.tempList;

        // how do i detect if selectedItem.text has not been changed
        if (this.selectedItem.text.hasNotChange??) return this.tempList;
     }
  }
}

Поток данных: 1 обновить текст> 2 список фильтров> 3 щелкнуть элемент списка, обновить (1) текст

  1. [ввод (текст): обновление по типу]>
  2. [li (filterItem): список фильтров по типу по значению (текст) и (selectedInput.text)]>
  3. [li (item) @click: update (1), а также другое значение (selectedInput.text) input (text) равным (item.text)]

Этот цикл работает до тех пор, пока я не буду действовать где-нибудь еще, обновляя selectedInput.text.

Могу ли я что-нибудь сделать с установщиком / получателем для модели Text.


javascript vue.js immutability
person devric    schedule 09.03.2018    source источник
comment
могу я узнать почему? что ты будешь делать, если его не меняли? Если он не изменился, вычисляемый установщик даже не сработает. вам, вероятно, понадобится смотреть   -  person Jacob Goh    schedule 09.03.2018
comment
Сохраните исходное значение текста и сравните текст с ним.   -  person Roy J    schedule 09.03.2018
comment
@JacobGoh, если ПЕРВОЕ значение не изменится, я верну текущий временный список. Я столкнулся с другой проблемой, используя Watch. Я занимаюсь сложным двухсторонним связыванием. который полагается на ДВЕ переменные   -  person devric    schedule 09.03.2018
comment
@RoyJ, да, я пробую с сеттером / получателем, чтобы увидеть, могу ли я сделать временную копию текстовой модели для ее сравнения. опубликует результат, если он работает   -  person devric    schedule 09.03.2018
comment
Вы рассматривали возможность использования наблюдателя вместо вычисляемого?   -  person connexo    schedule 09.03.2018
comment
@connexo, наблюдатели вызывают другие проблемы. У меня есть другой способ обновления наблюдаемой переменной, и с ней нужно обращаться по-другому, а наблюдатели сделали его больше похожим на привязку бесконечного цикла для того, что я пытаюсь сделать.   -  person devric    schedule 10.03.2018

Ответы (2)


arrow_upward
0
arrow_downward

Создайте переменную changed. Посмотрите selectedItem.text и установите changed на true. В наблюдателе на text установите changed в false.

person Roy J    schedule 09.03.2018

arrow_upward
0
arrow_downward

Я заставил это работать, используя временную переменную

data(){
   return: {
      text: "",
      temp: {
         text
      }
   }
}

computed(){
   filteredList(){
       var temporaryList,originalList,filteredList


       if ((this.text === $store.state.selectedText )||
           (this.text === this.temp.text ) ) {
                return temporaryList || originalList
           }

       // update
       this.temp.text = this.text

       return filteredList
   }
}

подумал, что было бы плохой практикой обновлять переменные в вычисляемом методе.

person devric    schedule 10.03.2018