Блог

Главная - Вопросы по программированию - Прослушивание реактивности Vue с другого объекта не работает

Прослушивание реактивности Vue с другого объекта не работает

#javascript #vue.js

#javascript #vue.js

Вопрос:

Я пытаюсь создать реактивный Vue из другого объекта. Пожалуйста, смотрите приведенный ниже код.

 test = {
    test: null
}

test.set = function () {
    this.test = 'data'
}

test_vue = new Vue({ data: test.test })
                   
console.log(test_vue.data) // null

test.set()

console.log(test_vue.data) // still null... I would expect 'data' here...

Что я делаю не так?

Ответ №1:

Вы можете использовать Vue 2 observable или Vue 3 reactive для создания реактивного объекта. Например, следующее создает хранилище данных с реактивным state объектом:

 import { observable } from 'vue'

const test_vue = {
  state: observable({
    test: null
  }),
  setTest() {
    this.state.test = 'data'
  }
}

test_vue.setTest() // => state.test === 'data'

Демонстрация Vue 2

Демонстрация Vue 3

Ответ №2:

Попробуйте присвоить test значение как свойство и set функционировать как метод vue

 test = {
  test: null
}

test.set = function() {

  this.test = 'data'

}

test_vue = new Vue({
  data() {
    return {
      test: test.test
    }
  },
  methods: {
    set: test.set
  }
})


console.log(test_vue.test)

test_vue.set()

console.log(test_vue.test) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

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

1. Для этого мне потребуется установить значения через реактивную зависимость… не очень хороший выбор дизайна, хотя он работает.

2. чего вы хотите достичь?

3. Реактивный поток из восходящих потоков в нисходящие потоки: вычисление при test и test_vue создаст основной набор данных. Представьте, что существует несколько вышестоящих «тестовых» объектов.

4. Я не понимаю вашего варианта использования, но независимо от того, что вы хотите сделать, вы могли бы добиться этого внутри экземпляра Vue или любого дочернего компонента

Метки: