我想将自定义属性绑定到选项选择菜单.该<option>标签只会有一个属性selected="selected"
<template>
<div>
<select>
<option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option>
</select>
</div>
</template>
data: {
selected: "selected",
notSelected: ""
}
这不起作用,但如果我v-bind:selected改为v-bind:class那么它会收到相应的类,因此逻辑正在工作,但不是selected属性.
有什么方法可以使用这些自定义属性吗？
我正在学习Vue路由器.我想进行程序化导航(没有<router-link>).我的路由器和视图:
router = new VueRouter({
routes: [
{path : '/videos', name: 'allVideos', component: Videos },
{path : '/videos/:id/edit', name: 'editVideo', component: VideoEdit },
]
});
new Vue({
el: "#app",
router,
created: function(){
if(!localStorage.hasOwnProperty('auth_token')) {
window.location.replace('/account/login');
}
router.push({ name: 'allVideos' })
}
})
因此,默认情况下,我推送到'allVideos'路线,在该组件内部,我有一个按钮和方法,可以重定向到''editVideo'按钮:
<button class="btn btn-sm btn-warning" @click="editVideo(video)">Edit</button>
方法:
editVideo(video) {router.push({ name: 'editVideo', params: { id: video.id } })},
它工作正常.但是当我尝试在VideoEdit组件中获取id时,我得到$route.params.id了错误Uncaught ReferenceError:$ route未定义
也许是因为我现在不使用npm只是Vue和Vuerouter的cdn版本.有解决方案吗 谢谢!
更新:在Vue开发工具中使用btw我在组件中看到了$ route实例
更新:
var VideoEdit = Vue.component('VideoEdit', {
template: ` …我是vue js的新手,并试图学习这个.我在我的系统中安装了一个全新的vue webpack版本.我有一个css,js和这个主题模板的图像,我想要包含在HTML中,所以我尝试添加它,index.html但我可以看到控制台中的错误,资产没有被添加.当我搜索时,我发现我可以require在main.js文件中使用.但是我收到了错误:
以下我在我的main.js文件中尝试过:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
require('./assets/styles/vendor.css');
require('./assets/styles/main.css');
require('./assets/scripts/vendor/modernizr.js');
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
虽然我尝试使用import来使用它,但我仍然遇到错误
// The Vue build version to load with the `import` …我想构建两个独立的vue应用程序,这些应用程序将在快速应用程序中的两个不同路由上提供:"公共"vue应用程序和"admin"vue应用程序.这两个应用程序有自己的路由器和商店,但它们共享许多自定义组件.如何编辑默认的webpack模板,使其根据我的两个不同的入口点('public'和'admin')输出两个单独的包？目标是最终得到一个或多或少像这样的设置:
my-app/
+- ...
+- dist/
| +- admin/ Admin bundle and files
| +- public/ Public bundle and files
+- src/
| +- components/ Shared components
| +- admin/ Entry point, router, store... for the admin app
| +- public/ Entry point, router, store... for the public app
+- ...
必须由可用的2个开发服务器http:// localhost:8080/admin和 http:// localhost:8080/public 每个项目必须位于dist的自己的文件夹中,并且自己的公共
我今天拥有的:在根目录中创建文件vue.config.js使用:
module.exports = {
// tweak internal webpack configuration.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: config => {
// If you wish to remove …我试图自定义处理程序添加InlineButtonClickHandler到<router-link>组件的click事件,这样我就可以发出一个自定义appSidebarInlineButtonClick事件.
但是,我的代码不起作用.我究竟做错了什么？
<template>
<router-link :to="to" @click="InlineButtonClickHandler">
{{ name }}
</router-link>
</template>
<script type="text/babel">
export default {
props: {
to: { type: Object, required: true },
name: { type: String, required: true }
},
methods: {
InlineButtonClickHandler(event) {
this.$emit('appSidebarInlineButtonClick');
}
}
}
</script>
我在每个my-progress中定义了计时器,用于更新视图的值,但控制台显示常量变化的值,并且视图的值仍未更改,我该如何在计时器中更改值观点
Vue.component('my-progress', {
template: '\
<div class="progress progress-bar-vertical" data-toggle="tooltip" data-placement="top">\
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" :style="{height: pgvalue}">{{pgvalue}}\
</div>\
</div>\
',
data : function(){
return {
pgvalue : '50%',
intervalid1:'',
}
},
computed:{
changes : {
get : function(){
return this.pgvalue;
},
set : function(v){
this.pgvalue = v;
}
}
},
mounted : function(){
this.todo()
},
beforeDestroy () {
clearInterval(this.intervalid1)
},
methods : {
todo : function(){
this.intervalid1 = setInterval(function(){
this.changes = ((Math.random() * 100).toFixed(2))+'%';
console.log (this.changes);
}, 3000);
} …我想在Vue.js应用程序中使用一些全局过滤器.我知道我需要在我的主Vue实例之前定义它们,但从代码组织的角度来看,将它们全部放在'main.js'文件中对我来说似乎并不合适.我怎么能将这些定义放在一个单独的文件中,导入'main.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 }">，但是如果将其删除，则会呈现页面。
使用v2.2.2.我的VueJS应用程序中有以下结构.如何从Post组件上的方法访问所有Account组件？帐户的数量是动态的 - 我想抓住所有已加载的Account组件并迭代它们.
我知道它有什么做$refs和$children我刚才似乎无法找出正确的道路.
<Root>
<Post>
<AccountSelector>
<Account ref="anAccount"></Account>
<Account ref="anAccount"></Account>
<Account ref="anAccount"></Account>
</AccountSelector>
</Post>
</Root>
是否可以访问Vue组件外部的VueRouter.
我试过在JavaScript文件中导入Vue.在这个文件中我可以访问Vue.http,但不能Vue.router或Vue.$router.最后2个返回undefined.
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueRouter from 'vue-router'
import routes from './config/routes'
import store from './store'
import * as rootUrl from './config/rootUrl'
//Routing support
Vue.use(VueRouter);
//Backend support
Vue.use(VueResource);
const router = new VueRouter({
mode: 'history',
routes: routes
})
new Vue({
store,
router,
}).$mount('#app')
Vue.http.get(rootUrl.url, {Accept: "application/json"}).then(response => {
let data = response.body
store.commit('SET_APP_DATA', { data: {
'title': data.title,
'peopleUrl': data.people,
'eventsUrl': data.events
}})
store.commit('SET_READY')
})