属性 --- 在渲染期间被访问但未在实例上定义

【问题标题】：Property --- was accessed during render but is not defined on instance属性 --- 在渲染期间被访问但未在实例上定义
【发布时间】：2021-11-16 20:53:04
【问题描述】：

我正在尝试使用 v-model 创建联系我们页面，但是我的代码似乎不想工作并不断输出这些错误：

  • 在渲染期间访问了属性“inputted_name”，但未在实例上定义
  • 在渲染期间访问了属性“inputted_email”，但未在实例上定义
  • 在渲染期间访问了属性“选项”，但未在实例上定义
  • 在渲染期间访问了“选定”属性，但未在实例上定义

//############--contact.js--############

//--------------- PAGE TITLE ---------------
// Vue object: Title
const PageTitle = {
    data() {
        return {
            title: 'Contact Us'
        }
    }
}

Vue.createApp(PageTitle).mount('#page-title')

//--------------- NAVIGATION (Cart) ---------------
// Vue object: Title
const CartTitle = {
    data() {
        return {
            cart_title: 'Cart'
        }
    }
}

Vue.createApp(CartTitle).mount('#cart-title')

//--------------- NAVIGATION (Main pages) ---------------
// Vue object: Titles
const MainNav = {
    data() {
        return {
            home: 'Home',
            for_hire: 'For Hire',
            about: 'About',
            contact_us: 'Contact Us',
            search: 'Search'
        }
    }
}

Vue.createApp(MainNav).mount('#nav-titles')

//--------------- FORM TITLES ---------------
// Vue object: Titles
const ContactTitles = {
    data() {
        return {
            main_title: 'Contact Us',
            name: 'Name',
            email_address: 'Email Address',
            select_option: 'What is your enquiry about?',
            checkboxes: 'Please click on each wrestling company you know:'
        }
    }
}

Vue.createApp(ContactTitles).mount('#contact-titles')


//--------------- FORM INPUTS ---------------
// Vue object: Inputs
const UserInputs = {
    data() {
        return {
            inputted_name: '',
            inputted_email: '',
            inputted_message: ''
        }   
    },

    methods: {
        checkInput: function () {
            if (this.inputted_name === '' || this.inputted_email === '' || this.inputted_message === '') 
            {
                alert("Please input in all the fields");
            }
        }
    }
}

Vue.createApp(UserInputs).mount('#contact-form-inputs')

// Vue instance: Select options
Vue.createApp({
    data() {
      return {
        selected: 'None',
        options: [
          { text: 'Booking enquiry', value: 'Booking' },
          { text: 'Website improvement', value: 'Website' },
          { text: 'Item enquiry', value: 'Item' },
          { text: 'Previous experiences', value: 'Experience' },
          { text: 'Career opportunity', value: 'Career' }
        ]
      }
    }
}).mount('#select-list')
/* Stylesheet for SIT120 Project - contact.html */
/*----------------------------------------------------*/

/*/////////////////////////-NO margins-//////////////////////////////*/
/* Expands to width of screen*/
body, html {
    margin: 0;
    padding: 0;
}

body {
    background-color: #AAAAAA;
}

/*/////////////////////////-Header Navigation-//////////////////////////////*/

/* Top navigation (cart) */
.cart_nav ul {
    list-style-type: none;
    margin: auto;
    overflow: hidden;
    background-color: #C6393F; 
}

.cart_nav li {
    float: right;
}

.cart_nav li a {
    font-family: Actor;
    font-size: 18px;
    font-style: normal;
    font-weight:normal;
    padding: 15px 55px 15px 20px;
    color: white;
    display: inline-block;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    
}

.cart_nav li a:hover 
{
    color:#AAAAAA;
}

/*/////////////////////////-Cart Number-//////////////////////////////*/

/* Cart number (circled) */
.cart_items 
{
    font-family: Righteous;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color:#2C2C2C;
    float: right; 
    margin-top: 16px;
    margin-right: 16px;
    margin-left: -33px;
    border-radius: 60%;
    width: 25px;
    height: 22px;
    text-align: center; 
}

/*/////////////////////////-Cart icons-//////////////////////////////*/

/* Top navigation ICONS (cart) */
.cart_icon
{
    display:inline-flex;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-bottom: -15px;
    margin-right: -17px;
    padding-left: 8px;
}

/*/////////////////////////-Main navigation-//////////////////////////////*/

/* Main navigation (pages) */
.page_nav ul
{
    list-style-type: none;
    margin: auto;
    overflow: hidden;
    background-color: #2C2C2C;
}

.page_nav li 
{
    float: left;
}

.page_nav li a {
    font-family: Bai Jamjuree;
    font-size: 22px;
    font-weight: bold;
    padding: 15px;
    line-height: 22px;
    color: #AAAAAA;
    display: inline-block;
    padding: 40px 60px 35px 30px;
    text-decoration: none;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

.page_nav li a:hover 
{
    color:#FFFFFF;
}

.page_nav li a.active
{
    text-decoration: overline;
    color:#FFFFFF;

}
.page_nav li a:focus
{
    text-decoration: overline;
    color:#FFFFFF;

}

/*/////////////////////////-Navigation icon (Search)-//////////////////////////////*/

/* Main navigation search ICON */
.search_icon
{
    display:inline-block;
    width: 35px;
    height: 37px;
    margin-top: -40px;
    margin-bottom: -15px;
    margin-right: -50px;
    padding-left: 13px;
    padding-right: 45px;
}

/*/////////////////////////-LOGO-//////////////////////////////*/

 /* Main logo (Wrestle Hire logo) */
.site_logo
{
    display: inline;
    float: left;
    width: 180px;
    height: 145px; 
    padding-right: 50px;
    margin-bottom: -20px;
    margin-left: -30px;
    margin-top: -10px;
}


.site_logo:hover
{
    cursor: pointer;
}

/*/////////////////////////-Form-//////////////////////////////*/
.form_container {
   background-color: #2C2C2C;
   margin-left: auto;
   margin-right: auto;
   width: 50em;
   padding: 45px;
   border: #C6393F 6px solid;
   border-radius: 4px;
   box-shadow: 20px 20px 20px grey;
}

.form_inputs 
{
    margin-left: 1.2em;
    margin-right: auto;
    width: 100%;
}

.input_container input {
    padding: 15px;
    border: none;
    width: 42em;
    
}

::placeholder {
    font-family: Abel;
    font-size: 18px;;
}

label {
    font-family: Bai Jamjuree;
    font-size: 18px;
    color: #AAAAAA;
    line-height: 2em;
}

input[type="text"]
{
    font-family: Bai Jamjuree;
    font-size: 18px;
    color: #2d2d2d;
    font-size: 1rem;
    background-color: white;
    border-radius: 4px;
}
<html>
    <head>
        <!--Stylesheets and responsiveness-->
        <link rel="stylesheet" type= "text/css" href="contact.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--Link Vue Framework-->
        <script src="https://unpkg.com/vue@next"></script>

        <!-- Set responsiveness to screen size -->
        <meta name="viewport" content="width=device-width, initial-scale=1">    

        <!--Google fonts-->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Actor">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bai Jamjuree">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel">

        <!--Page Icon-->
        <link rel="icon" href="../Assets/page_icon.png">

        <!-- Page title-->
        <title id="page-title">{{title}}</title>
    </head>
    
    <body>
        <!--NAVIGATION-->
        <header>
            <!--Top navigation section (login, account and cart)-->
            <div class = "cart_nav" id = "cart-title">
                <ul>
                    <div class = "cart_items">0</div>
                    <li><a href="#cart">{{cart_title}}<img class = "cart_icon" src="../Assets/cart.png" alt="cart_icon"></a></li>
                </ul>
            </div>

              <!--Main navigation section (main pages)-->
            <div class = "page_nav" id = "nav-titles">
                <ul>
                    <!--All main pages will have .html files, this example has the contact as a separate file (and empty files)-->
                    <a href="../Home/home.html"><img href ="../Home/home.html" class = "site_logo" id = "siteLogo" src="../Assets/website_logo.png"/></a>
                    <li><a href="../Home/home.html">{{home}}</a></li>
                    <li><a href="">{{for_hire}}</a></li>
                    <li><a href="">{{about}}</a></li>
                    <li><a class = "active" href="contact.html">{{contact_us}}</a></li>
                    <li class = "search" style="float:right"><a>{{search}}<img class = "search_icon" src="../Assets/search.png" alt="search_icon"></a></li>
                </ul>
            </div>
        </header>

        <!--CONTACT FORM-->
        <h1>contact us</h1>

        <div class="form_container" id = "contact-titles">
            <div class = "form_inputs" id = "contact-form-inputs">
                    <!--Name input-->
                    <div class="input_container">
                        <label for="nameInput">{{name}}</label> <br>
                        <input id="nameInput" type="text" v-model="inputted_name" placeholder="Enter name">
                    </div>
                    <br>

                    <!--Email input-->
                    <div class="input_container">
                        <label for="emailInput">{{email_address}}</label> <br>
                        <input id="emailInput" type="text" v-model="inputted_email" placeholder="example@gmail.com">
                    </div>
                    <br>

                    <!--Selection list-->
                    <div class="select_container" id = "select-list">
                        <select v-model="selected">
                            <label>{{select_option}}</label> <br>
                            <option v-for="option in options" :value="option.value">{{option.text}}</option>
                        </select>
                    </div>
            </div>
        </div>
    </body>

    <!-- Link JavaScript file -->
    <script src="contact.js"></script>
</html>

这与我如何制作组件有关吗？如果有人有答案，请在我的代码上显示更改，因为我对 Vue 非常陌生，谢谢

【问题讨论】：

    标签： javascript html vue.js vuejs3


    【解决方案1】：

    您的ContactTitles、UserInputs 和#select-lists 应用共享相同的布局，但不共享数据道具。如果您在最顶层的应用程序中定义了所有道具，错误就会停止。

    注意：我建议创建一个单独的根应用程序并改用组件，因为这种方法的可维护性非常困难。

    //############--contact.js--############

//--------------- PAGE TITLE ---------------
// Vue object: Title
const PageTitle = {
    data() {
        return {
            title: 'Contact Us'
        }
    }
}

Vue.createApp(PageTitle).mount('#page-title')

//--------------- NAVIGATION (Cart) ---------------
// Vue object: Title
const CartTitle = {
    data() {
        return {
            cart_title: 'Cart'
        }
    }
}

Vue.createApp(CartTitle).mount('#cart-title')

//--------------- NAVIGATION (Main pages) ---------------
// Vue object: Titles
const MainNav = {
    data() {
        return {
            home: 'Home',
            for_hire: 'For Hire',
            about: 'About',
            contact_us: 'Contact Us',
            search: 'Search'
        }
    }
}

Vue.createApp(MainNav).mount('#nav-titles')

//--------------- FORM TITLES ---------------
// Vue object: Titles
const ContactTitles = {
    data() {
        return {
            main_title: 'Contact Us',
            name: 'Name',
            email_address: 'Email Address',
            select_option: 'What is your enquiry about?',
            checkboxes: 'Please click on each wrestling company you know:',
        selected: 'None',
        options: [
          { text: 'Booking enquiry', value: 'Booking' },
          { text: 'Website improvement', value: 'Website' },
          { text: 'Item enquiry', value: 'Item' },
          { text: 'Previous experiences', value: 'Experience' },
          { text: 'Career opportunity', value: 'Career' }
        ],
            inputted_name: '',
            inputted_email: '',
            inputted_message: ''
        }
    }
}

Vue.createApp(ContactTitles).mount('#contact-titles')


//--------------- FORM INPUTS ---------------
// Vue object: Inputs
const UserInputs = {
    data() {
        return {
            inputted_name: '',
            inputted_email: '',
            inputted_message: ''
        }   
    },

    methods: {
        checkInput: function () {
            if (this.inputted_name === '' || this.inputted_email === '' || this.inputted_message === '') 
            {
                alert("Please input in all the fields");
            }
        }
    }
}

Vue.createApp(UserInputs).mount('#contact-form-inputs')

// Vue instance: Select options
Vue.createApp({
    data() {
      return {
        selected: 'None',
        options: [
          { text: 'Booking enquiry', value: 'Booking' },
          { text: 'Website improvement', value: 'Website' },
          { text: 'Item enquiry', value: 'Item' },
          { text: 'Previous experiences', value: 'Experience' },
          { text: 'Career opportunity', value: 'Career' }
        ]
      }
    }
}).mount('#select-list')
    /* Stylesheet for SIT120 Project - contact.html */
/*----------------------------------------------------*/

/*/////////////////////////-NO margins-//////////////////////////////*/
/* Expands to width of screen*/
body, html {
    margin: 0;
    padding: 0;
}

body {
    background-color: #AAAAAA;
}

/*/////////////////////////-Header Navigation-//////////////////////////////*/

/* Top navigation (cart) */
.cart_nav ul {
    list-style-type: none;
    margin: auto;
    overflow: hidden;
    background-color: #C6393F; 
}

.cart_nav li {
    float: right;
}

.cart_nav li a {
    font-family: Actor;
    font-size: 18px;
    font-style: normal;
    font-weight:normal;
    padding: 15px 55px 15px 20px;
    color: white;
    display: inline-block;
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    
}

.cart_nav li a:hover 
{
    color:#AAAAAA;
}

/*/////////////////////////-Cart Number-//////////////////////////////*/

/* Cart number (circled) */
.cart_items 
{
    font-family: Righteous;
    font-size: 16px;
    font-weight: bold;
    color: white;
    background-color:#2C2C2C;
    float: right; 
    margin-top: 16px;
    margin-right: 16px;
    margin-left: -33px;
    border-radius: 60%;
    width: 25px;
    height: 22px;
    text-align: center; 
}

/*/////////////////////////-Cart icons-//////////////////////////////*/

/* Top navigation ICONS (cart) */
.cart_icon
{
    display:inline-flex;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    margin-bottom: -15px;
    margin-right: -17px;
    padding-left: 8px;
}

/*/////////////////////////-Main navigation-//////////////////////////////*/

/* Main navigation (pages) */
.page_nav ul
{
    list-style-type: none;
    margin: auto;
    overflow: hidden;
    background-color: #2C2C2C;
}

.page_nav li 
{
    float: left;
}

.page_nav li a {
    font-family: Bai Jamjuree;
    font-size: 22px;
    font-weight: bold;
    padding: 15px;
    line-height: 22px;
    color: #AAAAAA;
    display: inline-block;
    padding: 40px 60px 35px 30px;
    text-decoration: none;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
}

.page_nav li a:hover 
{
    color:#FFFFFF;
}

.page_nav li a.active
{
    text-decoration: overline;
    color:#FFFFFF;

}
.page_nav li a:focus
{
    text-decoration: overline;
    color:#FFFFFF;

}

/*/////////////////////////-Navigation icon (Search)-//////////////////////////////*/

/* Main navigation search ICON */
.search_icon
{
    display:inline-block;
    width: 35px;
    height: 37px;
    margin-top: -40px;
    margin-bottom: -15px;
    margin-right: -50px;
    padding-left: 13px;
    padding-right: 45px;
}

/*/////////////////////////-LOGO-//////////////////////////////*/

 /* Main logo (Wrestle Hire logo) */
.site_logo
{
    display: inline;
    float: left;
    width: 180px;
    height: 145px; 
    padding-right: 50px;
    margin-bottom: -20px;
    margin-left: -30px;
    margin-top: -10px;
}


.site_logo:hover
{
    cursor: pointer;
}

/*/////////////////////////-Form-//////////////////////////////*/
.form_container {
   background-color: #2C2C2C;
   margin-left: auto;
   margin-right: auto;
   width: 50em;
   padding: 45px;
   border: #C6393F 6px solid;
   border-radius: 4px;
   box-shadow: 20px 20px 20px grey;
}

.form_inputs 
{
    margin-left: 1.2em;
    margin-right: auto;
    width: 100%;
}

.input_container input {
    padding: 15px;
    border: none;
    width: 42em;
    
}

::placeholder {
    font-family: Abel;
    font-size: 18px;;
}

label {
    font-family: Bai Jamjuree;
    font-size: 18px;
    color: #AAAAAA;
    line-height: 2em;
}

input[type="text"]
{
    font-family: Bai Jamjuree;
    font-size: 18px;
    color: #2d2d2d;
    font-size: 1rem;
    background-color: white;
    border-radius: 4px;
}
    <html>
    <head>
        <!--Stylesheets and responsiveness-->
        <link rel="stylesheet" type= "text/css" href="contact.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!--Link Vue Framework-->
        <script src="https://unpkg.com/vue@next"></script>

        <!-- Set responsiveness to screen size -->
        <meta name="viewport" content="width=device-width, initial-scale=1">    

        <!--Google fonts-->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Actor">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bai Jamjuree">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abel">

        <!--Page Icon-->
        <link rel="icon" href="../Assets/page_icon.png">

        <!-- Page title-->
        <title id="page-title">{{title}}</title>
    </head>
    
    <body>
        <!--NAVIGATION-->
        <header>
            <!--Top navigation section (login, account and cart)-->
            <div class = "cart_nav" id = "cart-title">
                <ul>
                    <div class = "cart_items">0</div>
                    <li><a href="#cart">{{cart_title}}<img class = "cart_icon" src="../Assets/cart.png" alt="cart_icon"></a></li>
                </ul>
            </div>

              <!--Main navigation section (main pages)-->
            <div class = "page_nav" id = "nav-titles">
                <ul>
                    <!--All main pages will have .html files, this example has the contact as a separate file (and empty files)-->
                    <a href="../Home/home.html"><img href ="../Home/home.html" class = "site_logo" id = "siteLogo" src="../Assets/website_logo.png"/></a>
                    <li><a href="../Home/home.html">{{home}}</a></li>
                    <li><a href="">{{for_hire}}</a></li>
                    <li><a href="">{{about}}</a></li>
                    <li><a class = "active" href="contact.html">{{contact_us}}</a></li>
                    <li class = "search" style="float:right"><a>{{search}}<img class = "search_icon" src="../Assets/search.png" alt="search_icon"></a></li>
                </ul>
            </div>
        </header>

        <!--CONTACT FORM-->
        <h1>contact us</h1>

        <div class="form_container" id = "contact-titles">
            <div class = "form_inputs" id = "contact-form-inputs">
                    <!--Name input-->
                    <div class="input_container">
                        <label for="nameInput">{{name}}</label> <br>
                        <input id="nameInput" type="text" v-model="inputted_name" placeholder="Enter name">
                    </div>
                    <br>

                    <!--Email input-->
                    <div class="input_container">
                        <label for="emailInput">{{email_address}}</label> <br>
                        <input id="emailInput" type="text" v-model="inputted_email" placeholder="example@gmail.com">
                    </div>
                    <br>

                    <!--Selection list-->
                    <div class="select_container" id = "select-list">
                        <select v-model="selected">
                            <label>{{select_option}}</label> <br>
                            <option v-for="option in options" :value="option.value">{{option.text}}</option>
                        </select>
                    </div>
            </div>
        </div>
    </body>

    <!-- Link JavaScript file -->
    <script src="contact.js"></script>
</html>

    【讨论】：

      猜你喜欢
      • 2021-11-05
      • 2022-11-22
      • 2021-11-14
      • 2022-01-12
      • 2021-04-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-10-12
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode