Alpine.js如何查看单选按钮的更改
Alpine.js如何查看单选按钮的更改
提问于 2021-03-02 01:30:27
假设我有这个html，并且我想在每次用户更改宠物时执行一些操作：
<input type="radio" id="cat" name="pet" value="cat">
<input type="radio" id="dog" name="pet" value="dog">我试过这样做：
<input type="radio" id="cat" :change="onPetChange('pet', 'cat')" name="pet" value="cat">
<input type="radio" id="dog" :change="onPetChange('pet', 'dog')" name="pet" value="dog">但是这并不起作用，它只是输出所有的值并调用onPetChange()两次。
回答 3
Stack Overflow用户
发布于 2021-03-02 14:00:08
您可以对单选项值执行x-model，然后对值进行watch更改，然后执行某些操作。在本例中，只需使用console.log
<div x-data="{pet: ''}" x-init="$watch('pet', value => console.log(value))">
<input type="radio" id="cat" value="cat" x-model="pet">
<input type="radio" id="dog" value="dog" x-model="pet">
<p>Pet: <span x-text="pet"></span></p>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div x-data="{pet: ''}" x-init="$watch('pet', value => console.log(value))">
<input type="radio" id="cat" value="cat" x-model="pet">
<input type="radio" id="dog" value="dog" x-model="pet">
<p>Pet: <span x-text="pet"></span></p>
</div>
Stack Overflow用户
发布于 2021-03-02 01:43:20
我想你的HTML标签上有一个拼写错误。应该是"onchange“而不是":change”。
由于您没有提供您的onPetChange函数，我不知道这是否也会成为您的问题。你把那个函数准备好了吗？
无论如何，这是一个脚本，当您选择第一个单选按钮时，它会在控制台上打印"hello world“。
尝试使用：
<input type="radio" id="cat" :change="console.log('Hello World!')" name="pet" value="cat">
<input type="radio" id="dog" onchange="onPetChange('pet', 'dog')" name="pet" value="dog">如果你也给我们提供你的onPetChange函数，我可以看看它是否也有什么问题。
Stack Overflow用户
发布于 2021-07-20 03:02:36
这样做效果很好：
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js"></script>
<div x-data="{res: ''}">
<input type="radio" id="cat" @change="console.log(res)" name="pet" value="cat" x-model="res">
<label for="cat">Cat</label><br>
<input type="radio" id="dog" @change="console.log(res)" name="pet" value="dog" x-model="res">
<label for="dog">Dog</label><br>
<p x-text="res"></p>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66426810
复制相关文章
相似问题
腾讯云开发者
