尝试在单选按钮上使用v-model和v-show来显示不同的div(Vue和Laravel)

时间:2019-06-06 00:09:37

标签: laravel vue.js

我正在尝试使用v-model和v-show根据选定的单选按钮选项显示不同的div,但是即使在页面加载时它们保持隐藏状态,它们也不会显示选择单选按钮时。

此代码是Laravel项目内部的Vue组件。当我仅使用Vue在https://jsfiddle.net/上尝试相同的代码时,它的工作原理与应有的完全一样。但是,当我在Laravel项目中尝试使用它时,它将无法工作。

组件的HTML(不用管id和name值):

<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>

任何帮助都会很棒:)

1 个答案:

答案 0 :(得分:0)

我注意到与您的Vue相关的JavaScript位于其自己的<script>标签内,我认为这意味着您正在刀片服务器模板中编写Vue代码。

虽然您可以 以这种方式运行Vue应用,但如果将JavaScript包含在resources/js的源文件中,则管理起来会更容易。甚至还有example already there供您自定义。

此外,当我问您是否检查控制台是否有任何错误时,我的意思是您的web browser's developer tools console。如果您尚未检查,它可能会以特定错误的形式提供非常明显的线索。

以下是您的控制台可能存在的几个错误:

  

ReferenceError:未定义Vue

这意味着您添加了Vue应用程序代码(new Vue({ ... })),但没有其他JavaScript(包括Vue库),因此代码不知道Vue是什么。

  

[Vue警告]:属性或方法“ showOption”未在实例上定义,但在渲染期间被引用。通过初始化属性,确保该属性在data选项中或对于基于类的组件都是反应性的。

如果您尝试通过running Laravel Mix修复上面未定义的Vue错误,并为生成的文件添加了<script>标签,则可能会看到此错误。这是因为默认的Mix源代码已经有一个针对#app的Vue应用示例,因此两者之间存在冲突,app.js中的一个赢得了胜利。

您将要删除Blade文件Vue应用并在app.js中自定义默认应用(推荐),或者删除app.js并保留Blade文件。

Official documentation on using Laravel Mix with JavaScript.