Question

我正在尝试使用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>

任何帮助都会很棒：）

Answer 1

我注意到与您的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.

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

1 个答案: