我正在尝试编写我的第一个Vuejs应用程序.我使用vue-cli和简单的WebPack样板.
当我vue-router向我的应用程序组件添加链接时,我在控制台中收到此错误
渲染函数出错:"TypeError:无法读取未定义的属性'匹配'"
这是我的代码:
App.vue
<template>
<div>
<h2>Links</h2>
<ul>
<router-link to='/'>Home</router-link>
<router-link to='/query'>Query</router-link>
<router-view></router-view>
</ul>
</div>
</template>
<script>
export default {}
</script>
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import routes from './routes.js'
import App from './App.vue'
const app = new Vue({
el: '#app',
routes,
render: h => h(App)
})
routes.js
import VueRouter from 'vue-router';
let routes=[
{
path: '/',
component: require('./Components/Home.vue')
},
{
path: '/query',
component: require('./Components/Query.vue')
}
];
export …使用Vue路由器时,/foo/:val您需要添加一个观察器以响应参数更改.这导致在URL中具有参数的所有视图中有些恼人的重复代码.
这可能类似于以下示例:
export default {
// [...]
created() {
doSomething.call(this);
},
watch: {
'$route' () {
doSomething.call(this);
}
},
}
function doSomething() {
// e.g. request API, assign view properties, ...
}
有没有其他方法可以克服这个问题？可以将处理程序created和$route更改结合起来吗？是否可以禁用组件的重用,以便根本不需要观察者？我正在使用Vue 2,但这对Vue 1来说也许很有趣.
我试图在vuex商店的一个部分创建一个对象,然后将id传递给另一个对象,我不知道如何正确地做到这一点,因为突变不能返回任何返回(在这种情况下,id ).
两个商店对象看起来像这样:
// store/report.js
const state = {
name: 'Untitled Report',
subReportIds: []
};
// store/subReport.js
const state = { ... }
我希望此操作创建空白报告,然后空白子报告,然后将子报告ID分配给新创建的报告.(子报告是独立的实体,可以由多个报告使用,因此存储中的区域不同)
const actions = {
createNewReport({ state, commit }) {
commit(mutationTypes.CREATE_NEW_REPORT)
// below doesn't work - i can't get return from mutation
let newSubreportId = commit(mutationTypes.ADD_NEW_SUBREPORT)
// if this worked, i'd then do something like
commit(mutationTypes.ADD_SUBREPORT_TO_REPORT, newSubreportId)
}
};
我怎样才能实现上述目标？
说我有两个线程和一个对象.一个线程分配对象:
public void assign(MyObject o) {
myObject = o;
}
另一个线程使用该对象:
public void use() {
myObject.use();
}
变量myObject是否必须声明为volatile？我想知道什么时候使用volatile而什么时候不用,这让我很困惑.是否有可能第二个线程在其本地内存缓存中保留对旧对象的引用？如果没有,为什么不呢？
非常感谢.
我正在使用Vue 2.0-rc.6(目前最新)和Vue-router 2.0-rc.5(目前最新).
我尝试在我this.$emit('custom-event')的一个路由器组件中,this.$on('custom-event', () => { console.log('I heard an event') })在我的Vue实例中,但事件没有被监听.路由器组件本身正在听取事件但不是Vue实例.
任何的想法？
看看这个jsfiddle.
我正在尝试将Flow添加到Vue 2 webpack-template.为了记录,我只在运行时(文件遵循.vue格式/标准).
我的第一次尝试是使用流经cli,我意识到它不会起作用,因为它不知道如何处理.vue文件.
我的第二次尝试是添加一个webpack加载器(即 flow-status-webpack-plugin)并运行Flow check作为构建的一部分(例如,eslint作品).这没有用,所以我调查了其他选择.
我的第三次尝试是使用一个babel插件,起初它相当成功.我使用了babel-plugin-typecheck + babel-plugin-syntax-flow.Webpack中没有输出,但类型错误会破坏应用程序.我对这种方法很好; 它可以正常使用CI并打破构建.
这是我.babelrc看起来的样子:
{
...
"plugins": [
...
["typecheck", {
"disable": {
"production": true
}
}],
"syntax-flow",
"transform-flow-strip-types"
],
...
}
此时,Flow按预期的方式对全局方法起作用,但在Vue组件内不起作用:
<template>...</template>
<script>
/* @flow */
const flowIt = (a: number): number => {
return a * 10
}
flowIt(20)
flowIt('bah') // Uncaught TypeError: Value of argument "a" violates contract. Expected: number Got: string
export default { …我有一个使用以下网站的登录问题:
在routes.js我有一个简单的拦截器设置
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!router.app.auth.isUserLoggedIn) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
})
并且login.vue,在使用Google API仅用于登录成功后处理登录页面逻辑我称之为:
this.login(userData).then(
() => this.$router.push(this.redirectToAfterLogin), // Login success
() => {} …我有一个网站,根据设计和客户端的偏好,可以使用HTTP或HTTPS提供服务.客户公司只需选择是否使用http://或https://链接到我们的站点,IIS将完成其余工作.正在向页面添加一项功能,该页面处理只能通过SSL查看的敏感信息.客户已同意在不使用HTTPS连接时,应在此页面上禁用此附加功能.
在Page_Load事件中,我想添加一个IF语句,该语句检查当前是否正在通过HTTPS查看该页面,以显示或禁用此可选功能.我可以读取URL以查看它是否以https://开头,但担心该方法不安全.
在Page_Load事件期间是否有可以检查以测试HTTPS的属性？
根据Vue docs,绑定密钥需要在v-for中使用自定义组件:
<template v-for="(task,i) in tasks">
<task-card v-bind:task="task" v-bind:key="i"></task-card>
</template>
我想在子组件(task-card)中使用该键,但是既不使用this.key也不添加key作为prop(是保留的Vue关键字).有没有办法做到这一点,而没有通过另一个价值"我"的道具？目前正与之合作"vue": "^2.5.9".
我正在尝试研究vue2,并想知道是否有任何方法可以轻松跟踪元素在视口中是否可见,以便我们可以在向下滚动页面时执行滑入框等操作.任何npm包或任何可以建议的？谢谢.