Materialize JS在首次加载时不起作用
[英]Materialize js doesn't work on first load
问题描述
我正在尝试制作Vue.js SPA聊天应用程序，但是Materialize CSS和JS出现问题。 JS在首次加载时不起作用，要使其正常工作，我必须重新加载页面。 由于控制台中没有错误，因此不确定问题出在哪里。
这是index.html：
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css"> <title>Chat</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> </body> </html>
这是问题所在的组件：
<template> <div class="container reg"> <h1 class="text-centered">Registrace</h1> <form @submit.prevent="register"> * Another form fields * <div class="input-field col s12"> <select> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select> <label>Materialize Select</label> </div> <input type="submit" value="Registrovat" /> </form> <router-link :to="{ name: 'login' }"> <button>Login</button> </router-link> </div> </template> <script> document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('select'); var instances = M.FormSelect.init(elems, null); }); export default { data: function () { return { }; }, methods: { Register () { } } } </script>
1 个解决方案
解决方案1
0 2018-06-11 12:25:17
看来使用外部jQuery库是Vue.js的反模式，因为
Vue.js和jquery争夺DOM的处理方式。
我认为您必须通过npm安装它，然后在编译过程中手动插入css和js ，因为我在物化和离子3方面存在相同的问题。
- 如果您想采用这种方式， 此答案可以为您提供帮助
如果你wan't花时间找到一个解决办法手动导入css和js编译过程中会更好，使用更Vue公司友好的解决方案是这样
我修改了答案以添加另一个有用的链接。 该库使用Materialize CSS和Vue.js来构建UI appcomponents.org
使用JQuery调整大小和重新对齐图像在第一次加载时不起作用
[英]Using JQuery to resize and realign images doesn't work on first load
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.