Установка значение в vuejs?

Question

[enchikiben]

Добрый день! Подскажите как чтобы при инициализации vuejs считывал значение из input? А то получается он перезаписывает input своим значением.

new Vue({
    el: '#form',
    data: {
      text: ""
    }
  });

<input type="text" v-model="text" value="тут текст при редактировании">

получается что при открытии он стирает значение.

Answer 1

[Evgeny Kulakov]

Просто значение переменной присвойте:

new Vue({
    el: '#form',
    data: {
      text: "тут текст при редактировании"
    }
  });

Comments

[enchikiben]

как то не правильно передавать текст с html в файл js, неужели нет другого способа? чтобы при инициализации он прочитал значение которое есть в input

[Evgeny Kulakov]

А зачем его передавать?
html есть отображение данных, данные у вас сидят в скрипте и там же происходит их инициализация, имхо все логично. Или я задачу не совсем правильно понимаю.

[enchikiben]

Evgeny Kulakov: есть форма которую открывают на редактирование (из базы подтянулись данные и показываются в форме, в input) с этими данными мне надо работать в Vue но он их не считывает из формы, а перезаписывает пустыми значениями.

можно конечно так:

new Vue({
    el: '#form',
    data: {
      text: document.getElementById("text").value
    }
  });

но мне кажется не комильфо это

[Evgeny Kulakov]

enchikiben: У вас с элементами в форме связаны переменные в скрипте - text вашем примере. При открытии формы отправляете запрос, получаете нужные данные, которые присваиваете переменным, при этом автоматически их значения появятся в форме. При изменении в форме, соответственно эти переменные также будут сразу же изменяться (засчет использования v-model).

Или у вас такая связка, что прилетает уже отрендеренная страница с формой, и в ней запускается vue?

[enchikiben]

Evgeny Kulakov: второе, форма с данными уже отрендерина все просто без аяксов

[Evgeny Kulakov]

enchikiben:
Вообще, это не совсем стандартная практика использования вью, все-таки данные должны из скрипта прилетать, а не наоборот.
Можно использовать либо ваш вариант либо ref ссылку:

<input type="text" ref="myinput" value="тут текст при редактировании" @input="text=$event.target.value">

new Vue({
    el: '#form',
    data: {
      text: ''
    },
    mounted() {
      this.text = this.$refs.myinput.value
    }
  });

[enchikiben]

Evgeny Kulakov: спасибо )