VueJs验证父组件中的子组件名称

时间:2017-03-25 01:18:10

标签: javascript vue.js vuejs2 vue-component

我有一个如下所示的父组件,它实现了动态组件切换。挑战在于我想确保索引0处的componentArgs this.components.indexOf(componentArgs[0]) > -1数据有效。行this.components抛出TypeError。

  

Parent.vue?e9d7:xx Uncaught TypeError:无法读取属性' indexOf'   未定义的

显然,<template> <component v-bind:is="currentForm" v-on:switchcomponent="switchComponent"></component> </template> <script> import Login from '@/components/Login' import Signup from '@/components/Signup' export default { name: 'Parent', components: { login: Login, signup: Signup }, data () { return { title: 'Sign Up or Login', email: '', currentForm: 'login' } }, methods: { switchComponent: function (componentArgs) { // componentArgs format: [name, title, email (Use empty string if N/A.)] let name = 0 let title = 1 let email = 2 console.log('component: ' + componentArgs) if (this.isValidComponent(componentArgs)) { this.currentForm = componentArgs[name] this.title = componentArgs[title] this.email = componentArgs[email] } }, isValidComponent: function (componentArgs) { let exactLength = 3 if (componentArgs.length === exactLength) { console.log('components ' + this.components) if (this.components.indexOf(componentArgs[0]) > -1) { console.log('component exists') return true } return false } return false } } } </script> 不是访问父组件的正确方法。我该如何做到这一点?

public class Project {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;
    private String city;
    private String state;
    private String country;
    @Enumerated(EnumType.STRING)
    private StatusType status;
    private String street;
    private double latitude;
    private double longitude;
    @Convert(converter=ProjectPropertyConverter.class)
    private ProjectProperty property;
}

public class ProjectProperty {

    private String description;
    private List<String> projectImgs;
    private Boolean hasImages;
}

1 个答案:

答案 0 :(得分:1)

可以从

访问components属性
this.$options.components

所以你的功能可能是

isValidComponent(name){
  return !!this.$options.components[name];
}

其中name是组件的名称。我无法确切地告诉你componentArgs传递了什么。

https://github.com/viezel/napp.alloy.adapter.restapi