小编Joh*_*ore的帖子

什么是Vue.extend?

这很简单,但我没有从文档中得到我需要的答案.我在学习Vue.js的过程中,我真的不明白的地方Vue.extend.我得到Vue.component适合,但我看不出有什么Vue.extend做这Vue.component不.它只是1.0的遗留功能吗?如果没有,它在Vue 2.0中有用吗?

vue.js

39
推荐指数
4
解决办法
3万
查看次数

如何访问Vuex模块的getter和mutgers?

我正在尝试切换到使用Vuex而不是我自己开发的商店对象,我必须说我没有像在Vue.js世界中那样清楚地找到文档.假设我有一个名为'products'的Vuex模块,它有自己的状态,突变,getter等.我如何在该模块中引用一个名为'clearWorking Data'的动作?文档提供了访问模块状态的示例:

__CODE__

但是我无法看到关于吸气剂,突变,动作等的任何信息.

vue.js vuex

36
推荐指数
5
解决办法
3万
查看次数

"您将v-model直接绑定到v-for迭代别名"

只是碰到我之前没有遇到的这个错误:"你将v-model直接绑定到v-for迭代别名.这将无法修改v-for源数组,因为写入别名就像修改一个函数局部变量.考虑使用对象数组并在对象属性上使用v-model." 我有点困惑,因为我似乎没有做错任何事.与之前使用的其他v-for循环的唯一区别是,这个有点简单,因为它只是循环遍历字符串数组而不是对象:

 <tr v-for="(run, index) in this.settings.runs">

     <td>
         <text-field :name="'run'+index" v-model="run"/>
     </td>

     <td>
        <button @click.prevent="removeRun(index)">X</button>
     </td>

 </tr>
Run Code Online (Sandbox Code Playgroud)

错误消息似乎表明我需要实际上使事情变得更复杂,并使用对象而不是简单的字符串,这对我来说似乎不合适.我错过了什么吗?

vue.js

30
推荐指数
1
解决办法
1万
查看次数

在Vue.js中定义公共常量的最佳方法是什么?

我正在使用单个文件组件开发几个Vue应用程序.我发现我的很多组件需要公共配置信息,例如包含传递方法的对象,我可能会这样定义:

const DeliveryMethods = {
  DELIVERY: "Delivery",
  CARRIER: "Carrier",
  COLLATION: "Collation",
  CASH_AND_CARRY: "Cash and carry"
}
Run Code Online (Sandbox Code Playgroud)

什么是使我的组件可用的最简单最简单的方法?目前,我已经使用'config.js'文件完成了它,如下所示:

export default {

  DeliveryMethods: {
    DELIVERY: "Delivery",
    CARRIER: "Carrier",
    COLLATION: "Collation",
    CASH_AND_CARRY: "Cash and carry"
  }

}
Run Code Online (Sandbox Code Playgroud)

在我需要它的组件中,我有import config from 'src/config.js',并且我想在其中使用其中一个,我将参考例如,config.DeliveryMethods.CASH_AND_CARRY.这在我看来相当冗长和重复,但我更愿意能够使用DeliveryMethods.CASH_AND_CARRY而不是config.DeliveryMethods.CASH_AND_CARRY.其他人用什么来完成这个?

vue.js

29
推荐指数
2
解决办法
3万
查看次数

如何在Vue.js中添加一堆全局过滤器?

我想在Vue.js应用程序中使用一些全局过滤器.我知道我需要在我的主Vue实例之前定义它们,但从代码组织的角度来看,将它们全部放在'main.js'文件中对我来说似乎并不合适.我怎么能将这些定义放在一个单独的文件中,导入'main.js'?我不能完全理解这个导入/导出的东西.

vue.js vuejs2

28
推荐指数
4
解决办法
1万
查看次数

使用vue-router保留组件状态?

我有一个列表/详细用例,用户可以双击产品列表中的项目,转到详细信息屏幕进行编辑,然后在完成后返回列表屏幕.我已经使用这里描述的动态组件技术完成了这项工作:https://vuejs.org/v2/guide/components.html#Dynamic-Components.但是现在我打算在应用程序的其他地方使用vue-router,我想重构它以使用路由.使用我的动态组件技术,我使用keep-alive来确保当用户切换回列表视图时,存在与编辑之前相同的选择.但在我看来,通过路由,产品列表组件将被重新渲染,这不是我想要的.

现在,看起来路由器视图可以包含在keep-alive中,这可以解决一个问题,但会引入很多其他问题,因为我只希望该路由保持活动,而不是全部(并且目前我只是使用了单顶级路由器 - 视图).Vue 2.1通过引入router-view的include和exclude参数,显然已经做了一些事情来解决这个问题.但我也不想这样做,因为在我的主页面中预先声明应该或不应该使用keep-alive的所有路线似乎非常笨拙.在我正在配置路由时(即路径数组中)声明我是否需要保持活动状态会更加简洁.那么我最好的选择是什么?

vue.js vue-router

16
推荐指数
4
解决办法
9581
查看次数

使用Vue.js进行JWT身份验证

我正在使用Vue.js和vue-router开发SPA,现在我正在使用JWT处理授权/身份验证.我对后端(API端点)进行了整理,以便它响应登录时发出令牌,并在后续请求中检查必需的头.我现在想要实现客户端(Vue.js)方面.

据我了解,从根本上说,我需要做的是要求对除"/"和"/ login"之外的所有路由进行身份验证.如果存在身份验证,则我在Authorization标头中提交令牌(在成功登录后存储在localStorage中).如果无法在服务器上成功验证,则由于错误响应,用户将被重定向到"/ login".

所以,我有几个问题需要做些什么来实现这个:

  1. 除了登录端点之外,我如何最好地为每个请求提交标头?我知道JQuery,我用于AJAX,我可以配置一个全局'ajaxSetup',它将导致每个请求都提交头,但我如何指定异常?单独将标头添加到每个API端点请求是很麻烦的.

  2. 同样,如何设置一个身份验证预检查,适用于除上述2('/'和'/ login')之外的所有路由?

  3. 鉴于我正在使用显然有效的身份验证(显然是因为它仍然必须在API端点上进行验证)以确定是否显示某些菜单项等,是否可以使其更加精细化并根据令牌有效负载中的"范围"字段确定不同权限级别的不同内容?显然,处理JWT令牌的最简单方法纯粹是确定它是否存在,因此在客户端不需要解析内容.但鉴于JWT确实允许有意义的内容,尝试在客户端和服务器上使用该含义是一个坏主意吗?显然,如果令牌本身是加密的,那么这变得不太实用,所以我的想法是使用未加密的令牌(并确保在有效载荷中没有任何后果暴露).

jwt vue.js

15
推荐指数
1
解决办法
1万
查看次数

指定导入的根路径?

我正在将我正在进行的Vue.js应用程序转换为使用vue-cli/Webpack和导入的模块我现在发现的相当繁琐的东西是准确地指定导入的相对路径.例如import bus from '../../bus',import Cell from '../Cell'.容易犯错误.

我假设它必须足够简单,以指定一个基本或根目录,并从中指定绝对路径,但我无法看到一个人会这样做.例如,在标准的vue-cli webpack设置中,我正在处理的代码都在'src'目录中,其中我有'components','mixins'等.如果我可以使用它会很方便import xxx from 'components/xxx',import yyy from 'components/a/yyy'.我该怎么办?

vue.js

12
推荐指数
4
解决办法
2万
查看次数

使 Vue.js 提供/注入响应式

我正在研究组件与其子组件、孙子组件等之间通信的不同方式,并且第一次研究了提供/注入。我可以让它正常工作而无需反应(我知道这是它的设计方式),但无法使用观察到的对象获得反应行为。假设我有一个嵌套对象结构,A > B > C,其中 A 是 C 的祖父母。我有 A 的数据属性“页面”,我想在孙子 C 中观察到它的变化。如果我只是在 A 中提供“页面”并在 C 中注入“页面”,它不是响应式的(按设计)。我想如果我这样做的话它可能会起作用:

在提供者中:

data() {
    return {
      page: null,
      obj:{currentPage:this.page}
    }
},


provide(){
     return {
       obj: this.obj
     }
  }
Run Code Online (Sandbox Code Playgroud)

在孩子或孙子中:

inject: ['obj']
Run Code Online (Sandbox Code Playgroud)

但事实并非如此。如果我尝试在孙组件中使用 obj.currentPage,它是未定义的。

我确信这非常简单。我没有得到什么?

vue.js

11
推荐指数
2
解决办法
1万
查看次数

使用 vue.js 验证输入 - v-model.number 的真正含义是什么?

如果我指定我的输入字段是数字,则v-model.number在提交表单(或者更确切地说,将 JSON 发布到服务器)之前我可以做出哪些假设来验证数字输入?即,我是否可以假设此时它始终是一个数字,因此可以集中精力测试它是否落在某个范围内?或者我还需要测试 isNan 等吗?

vue.js

10
推荐指数
1
解决办法
1万
查看次数

标签 统计

vue.js ×10

jwt ×1

vue-router ×1

vuejs2 ×1

vuex ×1