[英]Event after click element in Vue
This is my first post about VUE.这是我关于 VUE 的第一篇文章。 I try use VUE in Laravel.
我尝试在 Laravel 中使用 VUE。 I have this code:
我有这个代码:
index.blade.php: index.blade.php:
@extends('front._layout.main')
@section('content')
<div class="container mx-auto" id="vue-rendered">
<p class="text-white text-3xl">Płyty</p>
<div class="mt-5 max-w-screen-md mx-auto text-text text-lg">
<div class="text-right text-xl">
<div class="text-white">Sortowanie:</div>
</div>
xxxxx
<product-list></product-list>
</div>
</div>
@endsection
ProductList.vue:产品列表.vue:
<template>
<form>
<div class="multiselect">
<div class="selectBox" id="selectBox">
<select>
<option>Typ</option>
</select>
<div class="overSelect"></div>
</div>
<div class="checkboxes">
<label for="one">
<input type="checkbox" id="one"/>First checkbox</label>
<label for="two">
<input type="checkbox" id="two"/>Second checkbox</label>
<label for="three">
<input type="checkbox" id="three"/>Third checkbox</label>
</div>
</div>
</form>
</template>
<script>
import axios from "axios";
export default {
name: "product-list",
mounted() {
this.loadProducts();
},
data() {
return {
products: [],
}
},
methods: {
loadProducts() {
axios
.get(route('json.products.get.list'))
.then(response => {
this.products = _.get(response, "data", []);
})
.catch(error => {
console.log(error);
});
}
}
}
window.onload = function () {
var selectBox = new Vue({
el: '#selectBox',
data: {
name: 'selectBox'
},
methods: {
showMultiselect: function (event) {
alert('It working')
showMultiselect();
}
}
});
}
</script>
multiselect.js:多选.js:
var expanded = false;
function showMultiselect() {
var checkboxes = document.getElementsByClassName("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
app.js:应用程序.js:
try {
window._ = require('lodash');
window.axios = require('axios');
window.route = require('@/common/route');
require('./libs/swal.js');
require('./vue');
require('./libs/multiselect.js');
window.Vue = require('vue');
Vue.component('product-list', require('./components/ProductList.vue').default);
const app = new Vue({
el: '#vue-rendered',
})
} catch (e) {
console.log(e);
}
My problem is no action after click after click #selectBox.我的问题是单击#selectBox 后单击后没有任何操作。 I want show alert and run function showMultiselect.
我想要显示警报并运行函数 showMultiselect。
Htom, laravel show correct html code. Htom,laravel 显示正确的 html 代码。
How can I repair it?我该如何修复它?
Please help me.请帮我。 I am beginner in Vue
我是 Vue 的初学者
Looking at the Vue file, you can handle click events using the v-on:click (or @click for shorthand) - see Vue Docs - Event Handling for more info.查看 Vue 文件,您可以使用 v-on:click(或简写为 @click)来处理点击事件 - 请参阅Vue 文档 - 事件处理以获取更多信息。 You can also handle conditional rendering of the checkboxes with the v-if directive - see Vue Docs - Conditional Rendering for more info.
您还可以使用 v-if 指令处理复选框的条件渲染 - 有关更多信息,请参阅Vue Docs - Conditional Rendering 。
The end result in the .vue file, using your previous code, would be something like this. .vue 文件中的最终结果,使用您之前的代码,将是这样的。
ProductList.vue:产品列表.vue:
<template> <form> <div class="multiselect"> <div class="selectBox" id="selectBox" @click="toggleMutliSelect"> <select> <option>Typ</option> </select> <div class="overSelect"></div> </div> <div v-if="showMultiSelect" class="checkboxes"> <label for="one"> <input type="checkbox" id="one"/>First checkbox</label> <label for="two"> <input type="checkbox" id="two"/>Second checkbox</label> <label for="three"> <input type="checkbox" id="three"/>Third checkbox</label> </div> </div> </form> </template> <script> import axios from "axios"; export default { name: "product-list", mounted() { this.loadProducts(); }, data() { return { products: [], showMultiSelect: false, } }, methods: { loadProducts() { axios .get(route('json.products.get.list')) .then(response => { this.products = _.get(response, "data", []); }) .catch(error => { console.log(error); }); }, toggleMutliSelect() { alert('It working') this.showMultiSelect = !this.showMultiSelect } } } </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.