问题标签 [vuejs2]

我想将 Vue.js 变量与图像 URL 连接起来。

我计算的：

如果我为 android 构建：

别的

如何将计算变量与 URL 连接起来？

我尝试过这个：

当我尝试使用 Vuejs 2.0 设置服务器端渲染时，我的项目遇到了这个问题：

我的client-entry.js文件：

我的server-entry.js文件：

我webpack的服务器构建配置：

还有我的server.js文件：

PS：我的客户端构建工作正常。

我在 Vue 1.x 中有以下内容

但在 Vue 2 中，我尝试过：

并得到“属性或方法“缩略图”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性“

注意：当我将常规的小胡子插值过滤器分配给 html 元素上的属性时（即：{{ data | filter }} 可以作为纯文本正常工作，但在尝试执行 src="{{数据|过滤器}}”。

我尝试了一个计算属性，但它不起作用，因为我试图获取计算值的元素是数组中的每个元素（并且我正在遍历数组中的每个元素）。

缩略图所做的只是做一些正则表达式和花哨的文本替换。不确定在 vue2 中执行此操作的最佳方法。

总 Vue 菜鸟在这里。只是想要一个用于 Vue 的 typeahead 组件。Bootstrap 有一个，但我不知道如何整合这两者！

我能找到的唯一选项要么仅适用于 Vue 1.x，要么有大量文档（而且将 Bootstrap 组件移植到 Vue 2.x 的主要工作似乎不包括预先输入。）

所以我在 Vue 中开发应用程序。我在组件之间发送和接收数据时遇到问题。已经尝试过$dispatch/$broadcast，$emit/$on但现在仍在工作。我想从active_club发送ClubSelection.vue到vue_main.js。

Vue 版本：2.0.3

我的应用程序的结构：

1. vue_main - 主 Vue 文件
   1. HeaderElement.vue（vue_main的子级）
      1. ClubSelection.vue ( HeaderElement的孩子)

需要从 ClubSelection 发送 active_club 到 vue_main。

俱乐部选择.vue

vue_main.js

错误：

Vue警告]：观察者“俱乐部”中的错误（在组件中找到）

vue_main.js:16924 Uncaught (in promise) ReferenceError: club is not defined

我尝试了很多设置，这是其中之一。如何使这个工作？

我正在尝试使用 Vue.js 2 和单文件组件创建完全可重用的组件，现在我的方法似乎无法实现。

目标是创建用于为复杂的嵌套 JSON 结构创建表单的组件。这个结构应该被编辑然后发送到服务器。组件本身显示一个标题和提交按钮，但字段及其放置完全由我的组件用户负责。（前端工程师）

MyForm 组件（此处与实现无关）传递 JSON 数据和 url 以将它们发布到。

该表单应该可以被许多其他用户重用，并且表单本身的内容应该是不相关的。它可能混合了 html/inputs/custom 组件作为子组件。

让我们想象一个没有数据嵌套的简单场景，其中包含以下数据：

我想使用我的组件创建一个表单：

所以：

1. MyForm 被传递一个模型来提交，将它存储在数据中
2. MyTextInput 是一个自定义组件，用于显示带有标签的输入
3. 第二个 MyTextInput 是相同的组件，但在另一个包含名为“MyPanel”的组件中创建，因为该字段需要以不同的方式放置。

正如我们所见，传递变量和组合本身存在许多问题：

作品：

1. 如果我<slot></slot>在模板中放置一个MyForm用于显示字段的模板，它将在父范围内编译，因此所有子项（包括 MyTextField）都无法访问“模型”
2. 如果我尝试使用，<MyForm inline-template>我将无法自动显示表单页眉和页脚，因为所有内容都被替换了。此外，当使用单个文件组件时，编译器将在inline-template其中查找所有组件，这意味着我必须导入其中MyTextInput不切实际的组件。我事先并不知道所有永远不会以我的形式出现的组件！MyPanelMyForm

传递变量：

1. 如果我直接使用“模型”中的变量（在第一个 TextInput 中），我会收到警告说我正在修改来自父级的变量，它将在下一次渲染时被覆盖（但在这种情况下，它不会被覆盖，因为我有意修改父母）
2. 如果不将模型传递给第一，我就无法将模型MyTextInput传递给MyPanel第二。实际上，我必须将它传递给介于两者之间的每个自定义组件。而且我事先不知道会有多少自定义组件。这意味着我将不得不修改将要放入的每个组件的代码，MyForm并要求用户为他们包含的每个自定义组件传递数据。
3. 如果我要尝试正确通知父母有关更改，我需要将 v-on: 事件添加到每个文本输入和介于两者之间的每个自定义组件，以便事件到达MyForm。

正如我所说，该组件应该简单且易于重复使用。要求该组件的用户修改他们放入其中的每个子组件的代码并要求他们将 v-on: 添加到内部的每个组件中似乎并不切实际。

我的想法可以使用 Vue.js 2.0 解决吗？我之前为 AngularJS (1.5) 设计了相同的组件，它工作正常，不需要对表单的每个子项添加修改。

我对 VueJS 1.0 有疑问，这种行为在 VueJS 2.0 中有效。在 VueJS 1.0 中，如果我有一个整数列表并且绑定了一个复选框 v-model，则整数列表不会映射为选中的属性。

这是HTML

然后是 JavaScript：

输出将正确选中“1”，但 2 和 3 是整数，不会显示为选中状态。在 VueJS 2.0 中这有效，但在 VueJS 1.0 中无效。

此处提供完整的 JSFiddle：https ://jsfiddle.net/qf5gqsg6/

我正在制作一个 Vue 2 组件。但是当我npm link在其他项目中导入它时（我正在将它导入到一个随机组件中：）import InputTag from 'vue-input-tag'我看到了这个：

Failed to mount component: template or render function not defined. (found in component <input-tag>)

有任何想法吗？我要疯了。

这是回购：https ://github.com/matiastucci/vue-input-tag/tree/wtf

谢谢！

在花了几乎一整天的时间尝试从 Vue.js 1.X 升级到 Vue.js 2.0 之后，我仍然遇到错误（使用 gulp watch）

./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/example/example.vue 中的错误模块构建失败：SyntaxError : Parser.pp.unexpected (/home/vagrant) 的 Parser.pp$4.raise (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:2221:15) 的意外令牌 (41:79) /Projects/test/node_modules/acorn/dist/acorn.js:603:10) 在 Parser.pp$3.parseExprAtom (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1822:12)在 Parser.parseExprAtom (/home/vagrant/Projects/test/node_modules/buble/dist/buble.umd.js:656:26) 在 Parser.pp$3.parseExprSubscripts (/home/vagrant/Projects/test/node_modules/acorn /dist/acorn.js:1715:21) 在 Parser.pp$3.parseMaybeUnary (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1692:19) 在 Parser.pp$3。parseExprOps (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1637:21) 在 Parser.pp$3.parseMaybeConditional (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn. js:1620:21) 在 Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1597:21) 在 Parser.pp$3.parseMaybeAssign (/home/vagrant/项目/test/node_modules/acorn/dist/acorn.js:1608:25) @ ./resources/assets/js/components/example/exmple.vue 7:18-107 @ ./~/buble-loader!./ ~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/app.jsparseMaybeConditional (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1620:21) 在 Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn. js:1597:21) 在 Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1608:25) @ ./resources/assets/js/components/example/ exmple.vue 7:18-107 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/example/exampleParent .vue @ ./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/app.jsparseMaybeConditional (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1620:21) 在 Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn. js:1597:21) 在 Parser.pp$3.parseMaybeAssign (/home/vagrant/Projects/test/node_modules/acorn/dist/acorn.js:1608:25) @ ./resources/assets/js/components/example/ exmple.vue 7:18-107 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/example/exampleParent .vue @ ./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/app.js1608:25) @ ./resources/assets/js/components/example/exmple.vue 7:18-107 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type= script&index=0!./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/app.js1608:25) @ ./resources/assets/js/components/example/exmple.vue 7:18-107 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type= script&index=0!./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/components/example/exampleParent.vue @ ./resources/assets/js/app.js

我尝试安装多次，现在以以下软件包结束

我的 gulpfile 看起来像

有什么问题 ？如何解决这些重复的错误？

我的网站存在登录问题，该网站使用：

• Vue.js v2.0.3
• Vue路由器v2.0.1
• Vuex v0.8.2

在routes.js我有一个简单的拦截器设置

})

并且在login.vue使用 Google API 仅用于登录成功后处理登录页面逻辑，我称之为：

路由器.js

现在这里this.login只是对 vuex 的调用，用于更新登录的用户。

发生的情况是登录后，URL 更改为 /home，但DOM 没有更新！

成功更改 DOM 的唯一方法是强制location.reload()，这不是我想要做的，因为它丢失了我在 Head 中动态加载的 G 脚本。

关于如何强制视图更新 DOM 的任何想法？

注意：它只发生在用户第一次登录时，如果他注销并重新登录，重定向很好