我想知道如何使用props和检索将对象传递给子组件.我理解如何将其作为属性,但如何传递对象并从子组件中检索对象？当我从子组件使用this.props时,我得到未定义或错误消息.
父组件
<template>
<div>
<child-component :v-bind="props"></child-component>
</div>
</template>
<script>
import ChildComponent from "ChildComponent.vue";
export default {
name: 'ParentComponent',
mounted() {
},
props: {
firstname: 'UserFirstName',
lastname: 'UserLastName'
foo:'bar'
},
components: {
ChildComponent
},
methods: {
}
}
</script>
<style scoped>
</style>
儿童组件
<script>
<template>
<div>
</div>
</template>
export default {
name: 'ChildComponent',
mounted() {
console.log(this.props)
}
}
</script>
我有一个包含1个或多个（用户决定）交易的表格。我在父级组件的内部显示事务，并在子级（Transaction）组件中设置具有计算属性的事务属性。
用户数据可以通过计算出的属性进行更新，但是，当用户单击添加其他事务组件时，对于创建的任何新事务组件/对象，第一笔事务中的值都会重复。
我在这里和这里的论坛上都读过，解决方案是在模块定义中使用状态函数。这似乎不适用于我，我想了解原因。
这是复合组件Transaction的声明：
<template v-for="(fund_transaction, index) in fund_transactions">
<div class="card">
<div class="card-body">
<FundTransactionComponent
v-bind:fund_transactions="fund_transactions"
v-bind:key="index"
v-on:removedTransaction="removeFundTransaction(id)"
v-on:submittedTransaction="applyFundTransaction(fund_transaction.id)"
>
</FundTransactionComponent>
</div><!--END .card-body-->
</div><!--END .card-->
</template>
这是子组件（为简洁起见，计算道具被截断，它们只是getter和setter的状态属性）：
<template>
<div class="row">
<div class="col-10 float-left" v-if="this.fund_transactions.length > 0"></div>
<div class="col-2 float-right" v-if="this.fund_transactions.length > 0">
<button v-on:click="removeTransaction(index)" class="btn btn-icon btn-danger px-2 py-1 float-right">
<i class="fa fa-times"></i>
</button>
</div><!--END .col-1 float-right-->
<div class="col-md-6 col-sm-12">
<label class="form-control-label text-semibold">Transaction Date:</label>
<el-date-picker
type="date"
placeholder="select a date"
v-model="date_of_record"
style="width: 100%;"
format="MMMM dd, yyyy"
clearable
default-date="Date.now()" …我在尝试使用此功能规范时难以隔离问题.
require 'spec_helper'
feature 'Add Employee', type: :feature do
scenario 'with valid information' do
# visit setup_add_employees_path
visit '/setup/add_employees'
# save_and_open_page
fill_in "First Name", with: 'Test'
fill_in 'Last Name', with: 'Employee'
fill_in 'Email', with: 'testemployee@example.com'
# fill_in , with: 'testemployee@example.com'
# expect(page).to find_field('First Name').value
end
end
这是多部分表单的第2步,我编写了第一步的规范并且工作正常.但是,在此规范中,使用表单字段的fill_in不会.
以下是此规范的相关文件:
# add_employees.html.haml
= render "partials/nav_left_setup"
- model_class = Invitation.new.class
#alert_message
.page-header
%h1 Invite Your Employees
%p.lead Now it's time to add your employees to HuddleHR. We'll send an email to your employees …理解accepts_nested_attributes_for,我遇到了一些挑战.
我有一个由各种儿童班(地址,医生,监护人等)组成的居民班.我对使accept_nested_attributes_for工作所需步骤的理解如下:
我的地址适用于我的常驻记录,但是当我尝试添加其他类时,我的挑战就出现了.例如,医生也需要一个地址,监护人也是如此.
我还会在我的doctor.rb模型中添加接受nested_attributes_for:地址吗？如果是这样,这是否意味着我需要一个控制器来为这个资源调用它的组件的构建方法？这是时候在我的表单模板中使用嵌套的fields_for了吗？(例子如下)
<%= f.fields_for :doc1 do |doc| %>
<%= doc.text_field :fname %>
<%= doc.text_field :lname %>
<%= doc.fields_for :address do |doc_address| %>
<%= doc_address.text_field :street_address %>
<%= doc_address.text_field :city %>
<%= doc_address.text_field :state %>
<% end %>
<%= doc.fields_for :primary_phone do |phone1| %>
<%= phone1.phone_field :area_code %>
<%= phone1.phone_field :number %>
<% end %>
<% end %>
以下是相关文件:
resident.rb
class Resident < ActiveRecord::Base
attr_accessible :address_attributes, :guardian_attributes, :desrep_attributes, :doctor_attributes,
:em_contact1_attributes, :em_contact2_attributes, :fname, …我在使用 vue-router 加载页面时遇到问题。看来我的$routervar 没有被访问。
当我控制台日志时，this.$router我收到一个未定义的消息。但是，控制台日志记录this会返回开发工具中的存储对象。
以下是相关脚本：
main.js
import Vue from "vue";
import VueCookies from 'vue-cookies';
import App from "./App.vue";
import router from "./router";
import { store } from "./store/store";
import BootstrapVue from "bootstrap-vue";
import "./registerServiceWorker";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import "../css/bracket.min.css";
Vue.use(BootstrapVue);
Vue.use(VueCookies);
// set default config
VueCookies.config('1d');
// set global cookie
VueCookies.set('theme','default');
VueCookies.set('hover-time','1s');
require("../css/bracket.min.css");
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
路由器.js
import Vue from "vue";
import Router …