Questions tagged «vue.js»

我可以将router-link标签包装或封装在标签中button吗？ 当我按下按钮时，我希望它将我路由到所需的页面。

79 button  vue.js  vue-router 

我有一个javascript变量，我想在实例化时将其全局传递给Vue组件，因此每个注册的组件都将其作为属性，或者可以全局访问。 注意：我需要将vuejs的全局变量设置为READ ONLY属性

79 vue-component  vue.js  vuejs2 

如何在列表中使用计算属性。我正在使用VueJS v2.0.2。 这是HTML： <div id="el"> <p v-for="item in items"> <span>{{fullName}}</span> </p> </div> 这是Vue代码： var items = [ { id:1, firstname:'John', lastname: 'Doe' }, { id:2, firstname:'Martin', lastname: 'Bust' } ]; var vm = new Vue({ el: '#el', data: { items: items }, computed: { fullName: function(item) { return item.firstname + …

78 javascript  vue.js  computed-properties 

我有一个vuex商店，如下所示： import spreeApi from '../../gateways/spree-api' // initial state const state = { products: [], categories: [] } // mutations const mutations = { SET_PRODUCTS: (state, response) => { state.products = response.data.products commit('SET_CATEGORIES') }, SET_CATEGORIES: (state) => { state.categories = state.products.map(function(product) { return product.category}) } } const actions = { FETCH_PRODUCTS: …

78 javascript  vue.js  vuex 

我一直在阅读官方文档，但无法找到有关环境变量的任何信息。显然，有一些社区项目支持环境变量，但这对我来说可能是过大了。所以我想知道在使用Vue CLI创建的项目上是否有一些简单的开箱即用的功能可以正常工作。 例如，我可以看到，如果执行以下操作，将打印出正确的环境，这意味着已经设置好了吗？ mounted() { console.log(process.env.ROOT_API) } 我对环境变量和Node有点陌生。 仅供参考，使用Vue CLI 3.0 beta版。

78 node.js  vue.js  environment-variables  vue-cli  vue-cli-3 

我的vuex商店中有两个模块。 var store = new Vuex.Store({ modules: { loading: loading posts: posts } }); 在模块中loading，我有一个saving可以设置true或的属性，false并且还有一个名为TOGGLE_SAVING该属性的突变函数。 在模块中posts，在获取帖子之前和之后，我想更改property saving。我是通过commit('TOGGLE_SAVING')从posts模块中的操作之一进行调用来实现的。 var getPosts = function (context) { contex.commit(TOGGLE_LOADING); }; 当它尝试提交时，控制台中出现以下错误 [vuex] unknown local mutation type: TOGGLE_LOADING, global type: posts/TOGGLE_LOADING 如何使用来更改另一个模块中的状态commit？

77 vue.js  vuejs2  vuex 

我的页面当前具有Navigation.vue组件。我想使每个导航悬停并处于活动状态。“悬停”有效，但“活动”无效。 这是Navigation.vue文件的样子： <template> <div> <nav class="navbar navbar-expand-lg fixed-top row"> <router-link tag="li" class="col" class-active="active" to="/" exact>TIME</router-link> <router-link tag="li" class="col" class-active="active" to="/CNN" exact>CNN</router-link> <router-link tag="li" class="col" class-active="active" to="/TechCrunch" exact>TechCrunch</router-link> <router-link tag="li" class="col" class-active="active" to="/BBCSport" exact>BBC Sport</router-link> </nav> </div> </template> 以下是样式。 <style> nav li:hover, nav li:active{ background-color: indianred; cursor: pointer; } </style> 这就是现在的悬停状态，并在活动状态下完全相同。 …

77 vue.js  vue-router  routerlink 

如何在vue.js中切换类？ 我有以下内容： <th class="initial " v-on="click: myFilter"> <span class="wkday">M</span> </th> new Vue({ el: '#my-container', data: {}, methods: { myFilter: function(){ // some code to filter users } } }); 当我单击时，th我想按以下方式申请active课程： <th class="initial active" v-on="click: myFilter"> <span class="wkday">M</span> </th> 这需要切换，即每次单击它都需要添加/删除类。

77 css  vue.js 

查看Vuetify示例代码v-toolbar的目的是v-slot:activator="{ on }"什么？例如： <template v-slot:activator="{ on }"> <v-toolbar-title v-on="on"> <span>All</span> <v-icon dark>arrow_drop_down</v-icon> </v-toolbar-title> </template> <script> export default { data: () => ({ items: [ 'All', 'Family', 'Friends', 'Coworkers' ] }) } </script> 据我所知，on它在任何地方都不是已定义的变量，因此我看不到它是如何工作的。当我在项目中尝试使用Internet Explorer时，Internet Explorer会引发错误<template v-slot:activator="{ on }">，但如果将其删除，则会呈现页面。

77 vue.js  vuejs2  vuetify.js 

我已经创建了一个页面，我想通过API调用从数据库中获取所有数据，但是我还是VueJS和Javascript的新手，我也不知道我在哪里弄错了。我确实用Postman进行了测试，并且得到了正确的JSON。 这是我得到的： [__ob__: Observer] length: 0 __ob__: Observer {value: Array(0), dep: Dep, vmCount: 0} __proto__: Array 这就是我要的： (140) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …

77 javascript  arrays  laravel  vue.js  axios 

我正在使用Vue 2.x和Vuex 2.x创建一个Web应用程序。我正在通过http调用从远程位置获取一些信息，我希望如果该调用失败，我应该重定向到其他页面。 GET_PETS: (state) => { return $http.get('pets/').then((response)=>{ state.commit('SET_PETS', response.data) }) }, error => {this.$router.push({path:"/"}) } ) } 但是this.$router.push({path:"/"})给我以下错误。 未捕获（承诺）TypeError：无法读取未定义的属性“ push” 如何做到这一点。 模拟的JsFiddle：在这里

76 javascript  vue.js  vuex 

我在这里遇到问题，我不知道我的代码有什么问题，但是我在控制台中收到警告，如何删除此警告？ [Vue提示]：：<todo-item v-for="todoItem in todos">用v-for呈现的组件列表应具有显式键。有关更多信息，请参见https://vuejs.org/v2/guide/list.html#key。 （位于中<Root>） index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue Tutorial</title> <link rel="shortcut icon" href="https://vuejs.org/images/logo.png"> <script src="scripts/vue.js"></script> </head> <body> <section id="app"> <p>{{ msg }}</p> <p v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </p> …

76 javascript  vue.js  vuejs2 

我如何禁用ESlint在生成的项目vue-cli？ preLoaders: [ { test: /\.vue$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ }, { test: /\.js$/, loader: 'eslint', include: projectRoot, exclude: /node_modules/ } ] 如果删除该loader: 'eslint'行，它将无法编译，与将其设置为空字符串相同。我知道我可以ESLint在初始化阶段选择退出，但是在创建项目后如何禁用它呢？

76 javascript  webpack  vue.js  vue-cli 

Vue.js的Stack Overflow叠图：Сокклассов 我有一些可通过以下方式访问的数据： {{ content['term_goes_here'] }} ...并将其评估为true或false。我想根据表达式的真实性添加一个类，如下所示： <i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i> 哪里true给我上课fa-checkbox-marked，错误会给我fa-checkbox-blank-outline。我上面写的方式给我一个错误： - invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']" 我应该如何编写它才能有条件地确定班级？

75 javascript  vue.js  vuejs2  conditional-formatting 

我正在将vue-cli支架用于Webpack 我的Vue组件结构/层次结构当前如下所示： 应用程式 PDF模板 背景 动态模板图片 静态模板图片 降价促销 在应用程序级别，我想要一个vuejs组件方法，该方法可以将所有子组件的数据聚合到一个可以发送到服务器的JSON对象中。 有没有办法访问子组件的数据？具体来说，多层深？ 如果不是，传递可观察的数据/参数的最佳实践是什么，以便在被子组件修改后可以访问新值？我正在尝试避免组件之间的硬依赖性，因此，到目前为止，使用组件属性传递的唯一内容是初始化值。 更新： 可靠的答案。查看两个答案后，我发现有帮助的资源： Vuex以及何时使用它 适用于小型应用程序的Vuex替代解决方案

74 vue.js  vue-component  vuex