我正在尝试使用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>
任何帮助都会很棒:)
答案 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.