【发布时间】:2017-10-26 14:43:32
【问题描述】:
我使用 ruby on rails 作为框架,使用 vue.js 来显示数据以及对我使用 axios 的 API 的请求。
首先我创建项目:
rails new myapp --webpack=vue
在 rails 中创建了一个文件夹:
app/javascript
└── packs
├── app.vue
└── hello_vue.js
app.vue:
<template>
<div id="app">
<ul v-for="result in results">
<li>{{result.name}}</li>
</ul>
<!-- <p>{{ results.name}}</p> -->
</div>
</template>
<script>
export default {
data: {
results: []
},
mounted(){
axios.get("xxxxx")
.then(response => {
this.results = response.data
})
}
}
</script>
hello_vue.js:
import Vue from 'vue'
import App from './app.vue'
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(document.createElement('hello'))
const app = new Vue(App).$mount('hello')
console.log(app)
})
允许我在视图中插入信息,例如:
<%= javascript_pack_tag 'hello_vue' %>
它会显示信息。
但是当我尝试用这样的新文件创建一个新文件夹时:
app/javascript
└── datos
├── app2.vue
└── hello2_vue.js
应用程序2:
<template>
<div id="app2">
<ul v-for="result in results">
<li>{{result.name}}</li>
</ul>
</div>
</template>
<script>
export default {
data: {
results: []
},
mounted(){
axios.get("xxxxxxxxxxxx")
.then(response => {
this.results = response.data
})
}
}
</script>
你好2:
import Vue from 'vue'
import App2 from './app2.vue'
document.addEventListener('DOMContentLoaded', () => {
document.body.appendChild(document.createElement('hello2'))
const app2 = new Vue(App2).$mount('hello2')
console.log(app2)
})
然后他们加载文件:
<%= javascript_datos_tag 'hello2_vue' %>
它显示此错误:
undefined method `javascript_datos_tag' for #<#<Class:0x0055a86f9b0218>:0x007fd3cf6d9958>
Did you mean? javascript_cdata_section
javascript_tag
javascript_pack_tag
【问题讨论】:
-
javascript_datos_tag,你为什么要使用它?我以前从未听说过。javascript_pack_tag不是 packs-folder-name 中的“动态”。 -
我尝试在 packs 文件夹中包含新文件,但仅当我复制这些文件时才有效,例如:app2 和 hello2_vue
标签: ruby-on-rails ruby webpack vue.js axios