正文

(Gorails)vuejs系列视频: Webpacker／vue-resource（不再为官方推荐）。

IP云
IP云V管理员/2 阅读
09/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

频：https://gorails.com/episodes/using-vuejs-for-nested-forms-part-1?autoplay=1

在嵌套表格上使用vue.js。

在application.html.erb

上<head>内加上：<%= javascript_pack_tag 'hello_vue' %>

如果有style（css）的话加上：<%= stylesheet_pack_tag 'hello_vue' %>

在hello_vue.js 进行配置：

需要安装vue-turbolinks和vue-resource：

在terminal上输入：

  • yarn add 'vue-turbolinks'
  • yarn add ''vue-resource''

添加：

import TurbolinksAdapter from 'vue-turbolinks'

import VueResource from 'vue-resource'

Vue.use(VueResource)
Vue.use(TurbolinksAdapter)

HTMLElement.dataset

The dataset property on the HTMLElement interface provides read/write access to all the custom data attributes(data-*) set on the element

返回一个DOMStringMap, 可以读写元素的custom data attributes （data-*）

  • string = element.dataset.camelCasedName;
  • element.dataset.camelCasedName = string;
  • string = element.dataset[camelCasedName];
  • element.dataset[camelCasedName] = string;

案例：

视频1 嵌套表格

我的git：https://github.com/chentianwei411/vue-nestedForm/blob/master/app/javascript/packs/nestedform.js

clone后，进入/teams

需要运行：bin/webpack-dev-server命令，提示没有找到

更新bundle update webpacker，再启动rails s

报告：config/webpacker.yml No such file  提示运行rails webpacker:install

rails webpacker:install安装后

我运行：

  1. bin/webpack
  2. bin/webpack-dev-server, 这个窗口必须始终打开。

然后程序就可以正确执行了，