Блог

Главная - Вопросы по программированию - Vue 3 реактивные значения, возвращаемые функцией f

Vue 3 реактивные значения, возвращаемые функцией f

#vue.js #vuejs3

Вопрос:

У меня есть функция, которая создает переменные. Мне нужно, чтобы они реагировали — это может измениться со временем, однако Vue не отслеживает эти изменения

     <template>
      {{ parse('foo') }}
    </template>
    
    <script>
    import { ref } from 'vue'
    
    export default {
      setup() {
        function parse(param) {
          const target = ref('initial value')
    
          setTimeout(() => {
            target.value = 'changed value'
          }, 3000)
    
          return target
        }
    
        return { parse }
      },
    }
    </script>

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

1. Похоже, для этого вам нужна реакция , а не ссылка . Но не могли бы вы объяснить, что вы пытаетесь отобразить в шаблоне?

Ответ №1:

Не рекомендуется вызывать метод внутри шаблона для визуализации чего-либо, вы можете определить реактивные данные вне функции и запустить функцию в настройках или в onMounted крючке, чтобы изменить целевое свойство :

    <template>
      {{ target }}
    </template>
    
    <script>
    import { ref } from 'vue'
    
    export default {
      setup() {
        const target = ref('initial value')
  
      function parse(param) {
            setTimeout(() => {
            target.value = 'changed value'
          }, 3000)        
        }
   //call the function 
   parse('foo')

    
        return { target }
      },
    }
    </script>

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

1. проблема в том, что я не знаю всех «целей» заранее… Вот почему я использую функцию.. В моем примере «синтаксический анализ» может вызываться в шаблоне много раз, и с разными параметрами он будет возвращать разные начальные значения и измененные значения..

2. Вы можете использовать кнопку для повторного запуска метода

Ответ №2:

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

вместо const target = ref('initial value') этого должно быть определено вне вашей функции, а затем функция должна быть вызвана соответствующим образом

   <template>
      {{ target }}
    </template>
    
    <script>
    import { ref } from 'vue'
    
    export default {
      setup() {
        const target = ref('initial value')
        function parse(param) {
          setTimeout(() => {
            target.value = 'changed value'
          }, 3000)
        }
        parse('foo')

        return { target } 
      },
    }
    </script>
Метки: ,