Vue3-My provide не обновляется после изменения данных с помощью смонтированного

Я попытался предоставить свои данные из родительского элемента, как показано ниже.

data(){
    return{
    allData:null,
    ingCollection:null,
    selectedDish:[]
    }
  },

  
  mounted(){
    Promise.all([
      d3.json('data.json'),
      d3.json('ingredientsonly.json')
    ]).then((data)=>{
      this.allData=data[0];
      this.ingCollection=data[1];
      
    })
  },
  components:{sidePanel,centerPiece},

  methods: {
    // receiveIngredients(selected){
    //   let selections = this.allData.filter(d=>{
    //     d.ingredients.includes(selected)
    //   });

    // }
  },
    provide() {
    return{
    allData:this.allData,
    ingCollection:this.ingCollection,
    selectedDish:this.selectedDish,
    receiveIngredients:this.receiveIngredients
    }
  }

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

Почему это?

Спасибо

vue.js data-visualization

06.04.2021 22:25

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

provide() вызывается только один раз при инициализации, а не при изменении ссылок внутри.

Вместо этого вы можете provide объект (например, с именем root), а затем обновить свойство этого объекта в mounted():

export default {
  provide() {
    return {
      root: {
        allData: null,
        ingCollection: null,
      }
    }
  },
  mounted() {
    Promise.all([
      d3.json('data.json'),
      d3.json('ingredientsonly.json')
    ]).then((data)=>{
      this.root.allData = data[0];
      this.root.ingCollection = data[1];
    })
  }
}

Привет, я столкнулся со странным поведением: когда я вставляю данные в смонтированные, он работает, пока я меняю данные, он не работает. Вы случайно не знаете почему?

— 06.04.2021 23:40

Что вы имеете в виду под словом «не работает»?

— 07.04.2021 03:22

после того, как я изменил this.root.allData, данные отражают изменение, показывая обновленные данные, но предоставляют значение, оставшееся таким же, как и раньше, «пустой массив»

— 07.04.2021 22:49

Можете ли вы создать репродукцию в codeandbox, чтобы помочь в устранении неполадок?

— 08.04.2021 06:19

06.04.2021 23:13