I encountered an issue while developing a Vue application with Vue-routes. One of the routes contains a function designed to modify the background colors of two divs based on the values entered in the respective input fields. However, I am facing two problems. Firstly, the router stopped functioning after implementing this color changing feature. Secondly, the actual color change is not taking place as expected, leading to a double failure situation. Upon inspecting the console in Google Chrome, I came across the following message: "vue.js:597 [Vue warn]: Cannot find element: #container".
It seems evident that these issues are interconnected. The real question now is how do I go about resolving them?
HTML
<div id="container" v-bind:style="bga">
<div class="top" v-bind:style="bgb">
<div id="app">
<h1 id="vueHead">Vue routing</h1>
<h2 class="menu">
<router-link to="/">Color</router-link>
<router-link to="/main">Main</router-link>
</h2>
</div>
</div>
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
index.js (routes)
import MainPage from '../components/mainPage.js'
import ColorPage from '../components/colorPage.js'
var urlend;
const routes = [
{path: '/', component: ColorPage},
{path: '/main', component: MainPage},
];
const router = new VueRouter({
routes // short for `routes: routes`
});
var vm = new Vue({
el: '#container',
router
});
colorpage.js
const ColorPage = {
template: `
<div id="middle">
<label id="colorLabel"><h2> {{ info }} </h2></label>
</br>
<input type="text" class="colorInput" v-on:input="bga.backgroundColor = $event.target.value" placeholder="here...">
</br>
<input type="text" class="colorInput" v-on:input="bgb.backgroundColor = $event.target.value" placeholder="... and here!">
</div>
`
};
var color = new Vue({
el: '#container',
data: {
info: 'Change Colors By Typing Their Names:',
bga: {
backgroundColor: ''
},
bgb: {
backgroundColor: ''
}
}
});
export default ColorPage