Почему не видит значение из props в Vue?

Question

[Максим]

Подскажите, почему в setup при открытии страницы не видит props.value, если сделаю вывод в консоль просто props сonsole.log(props) то выводит содержимое, а props.value нет, пусто

<script lang="ts">
import { defineComponent, ref, useContext } from '@nuxtjs/composition-api'

export default defineComponent({
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  setup(props, { emit }) {
    const { $axios } = useContext()

    const text = ref('')

    console.log(props)

    text.value = props.value
 }
})

Answer 1

[Evgeny Kulakov]

Может props.value просто пустая строка?

Comments

[Максим]

props в консоле показывает, что value не пустой

[Evgeny Kulakov]

Максим, наверное нужен скриншот, не понять, что вы видите, попробуйте сделать скриншот консоли вот такого кода:

// ...
 setup(props, { emit }) {
    console.log(props)
    console.log(props.value)
    onMounted(() => {
      console.log(props)
      console.log(props.value)
    })
 }

[Максим]

Evgeny Kulakov, вывел в вашей последовательности, там где props.value пусто

[Evgeny Kulakov]

Максим, Скорее всего value пустая все-таки изначально. У вас есть вывод в descriptionid компоненте и если я правильно предполагаю, там происходит получение данных? Если да, то видно что этот вывод самый последний в консоли. А когда вы разворачиваете объект props в консоли, то там данные уже есть и value не пустое.

[Максим]

Evgeny Kulakov, а как это можно обыграть?

[Evgeny Kulakov]

Максим, смотря чего вы хотите) как вариант сделать props реактивными: const { value } = toRefs(props);.

[Максим]

Evgeny Kulakov, опять та же ошибка, если value в console то ок, если value.value то пусто

[Evgeny Kulakov]

Максим, ну так и должно же быть, у вас компонент инициализируется, value пустое т.к. нет данных. Если вы хотите, чтобы он инициализировался, когда данные уже были, то в шаблоне, где этот компонент поставьте условие чтобы он показывался когда данные уже будут:

<my-component v-if="value" :value="value"></my-component>

Далее в my-component:

...
onMounted(() => {
console.log(props.value)
})

Либо watch в компоненте и отслеживайте там изменение пропса.