Попытка использовать v-model и v-show на переключателях, чтобы показать разные div (Vue и Laravel)

Question

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

Этот код является компонентом Vue внутри проекта Laravel. Когда я пробую этот код на https://jsfiddle.net/,, используя только Vue, он работает именно так, как и должен. Но когда я пробую это в моем проекте Laravel, это не работает.

HTML-код компонента (не обращайте внимания на значения идентификатора и имени):

<div id="app">
    <div>
      <span><strong>*</strong> options </span>

      <div>
        <input type="radio" id="grerjSim" name="grerj" value="showYes" v-model="showOption">
        <label for="grerjSim"> yes </label>
      </div>

      <div>
        <input type="radio" id="grerjNao" name="grerj" value="showNo" v-model="showOption">
        <label for="grerjNao"> no </label>
      </div>

      <div v-show="showOption === 'showYes'">
        <span><strong>*</strong> Lorem ipsum dolor sit amet. </span>
        <input type="text" required>
      </div>

      <div v-show="showOption === 'showNo'">
        <label for="grerjMotivo">No
        <select id="grerjMotivo">
          <option>Lorem ipsum dolor sit amet.</option>>
        </select>
        </label>
      </div>
    </div>
</div>

JS компонента:

<script>
new Vue({
 el: '#app',
 data: {
  showOption: value=""
 }
})
</script>

Любая помощь будет великолепна:)

Answer 1

Я заметил, что ваш связанный с Vue JavaScript находится внутри собственного тега <script>, что, как я предполагаю, означает, что вы пишете код Vue в своем шаблоне Blade.

Пока вы можете чтобы приложения Vue работали таким образом, им легче управлять, если вы сохраняете свой JavaScript, содержащийся в исходных файлах, расположенных в resources/js.Существует даже пример, который вы уже можете настроить .

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

Вот пара ошибок, которые может иметь ваша консоль:

ReferenceError: Vue не определен

Это означает, что вы добавили код приложения Vue (new Vue({ ... })), но нет другого JavaScript, включая библиотеку Vue, поэтому код не знает, что такое Vue.

[Vue warn]: свойство или метод "showOption" не определены в экземпляре, но на него ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Если вы попытались исправить неопределенную ошибку Vue, указанную выше, запустив Laravel Mix и добавление тега <script> для встроенного файла, вы можете увидеть это.Это связано с тем, что в исходном коде Mix по умолчанию уже есть пример приложения Vue с таргетингом на #app, поэтому оба конфликтуют, и один из них в app.js выигрывает.

Вы можете удалить файл Blade Vue.приложение и настройте значение по умолчанию в app.js (рекомендуется) или удалите app.js и сохраните файл Blade.

Официальная документация по использованию Laravel Mix с JavaScript.