Sending data using props in vue

2018-07-11 03:47 Kyl San Antonio imported from Stackoverflow

Checked most of the questions in and out of stackoverflow about the props in vue however, I'm still struggling on how to apply it on what I'm working.

I have a global component that fetch all the menus. Once fetched, it will construct or build the list (menus):

Vue.component('sidenav', require('./components/Sidenav.vue'));

Already did:
- Add prop: [menus] in customer/index.vue
- Set prop to true in router (customer)
- Bind the menu in Sidenav.vue : <input type="hidden" :menus="menus">

Need to achieve:
I want to send the data ("menus") to customer/index.vue using props instead of calling an API.

See also questions close to this topic

Dynamically assign styles to DOM Element in Polymer 3.0
I'm building a component in Polymer 3.0 for the first time, and I was wondering how to dynamically assign styles to a DOM element. I am building a horizontal timeline of events, and I would like to place vertical markers at every year in set range. In Vue.js, I would do something like this:
```
<year-marker v-for="(year, index) in years" :style="getPercentFromLeft(year)" :key="index"></year-marker>
```
In this setup, I would have a data structure with all the years that I want to display, and the v-for would loop through that data structure and render a markers for every year. The getPercentFromLeft function would calculate the percent from the left side of the screen that the marker should be positioned. The return value is in the format of {left: 10%}. The year-marker has additional styles, but they are specified in the style section.

What is the equivalent way to do this in Polymer 3.0? If there isn't one, what is a better way to do this?
Cross origin resource sharing error. Problem with Vuejs or apache2?

I’m creating a vue project that uses node packages. These packages naturally contact other domains and I am hit with CORS blocking the access to my request.

I can tweak with my chrome settings and even use an extension to make it work. But how do I make it work for everyone?

In the end I am distributing this on my own Apache2 server.

How do I get around this?
Turn off seperate chunks for css , vue cli 3 webpack 4

I am using a project created with the latest version of vue cli 3 . I am using the default config , My router has many dynamically imported routes . Both my css and js are split into multiple chunk while running in production . While the behaviour with js is desirable . My css files are quite small I would like to turn off the chunks for css.

How do I configure webpack to do this via the vue.config.js file . Please help with the exact command as I find the webpack config and chain syntax very confusing .Thanks : )

Why does my scroll-top method only work after the first time executing?

I have a Vue.js component App.vue and I want to dynamically attach/detach components with @click combined with v-if, v-else directive. I also want the jQuery animate scroll. This is my code :

<template>
    <div class="container">
        <RingsProduction v-if="flag"></RingsProduction>
        <RingsGuide v-else></RingsGuide>
        <nav @click="scroll" aria-label="Page navigation" class="text-center js-btn">
            <ul class="pagination">
                <li>
                    <a aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li>
                    <a>1</a>
                </li>
                <li>
                    <a>2</a>
                </li>
                <li>
                    <a>3</a>
                </li>
                <li>
                    <a aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</template>

<script>
    import RingsProduction from "./components/RingsProduction.vue";
    import RingsGuide from "./components/RingsGuide.vue";

    export default {
        name: "app",
        components: {
            RingsProduction,
            RingsGuide
        },
        data: function () {
            return {
                flag: true
            };
        },
        methods: {
            scroll: function () {
                $(".js-btn").click(function () {
                    $("html, body").animate(
                        {
                            scrollTop: $(".scroll-top").offset().top
                        },
                        200
                    );
                });
                this.flag = !this.flag;
            }
        }
    };
</script>

<style lang="sass">
    .pagination cursor: pointer
</style>

Everything works fine but after 1st click. When I first click on navigation bar the flag is changing, but scroll did not run. The components changed, but scroll is still on bottom of the page. After 2nd click it works like it should. I don't get any console or Vue dev warnings or errors so I stucked without ideas.

The most strange thing is that actually works perfectly after 1st click.

How do I pass the name and the value to a VueJS function?
I have created this form and want to record all fields at blur to a function with name and value to localStorage

I already saved the name of the field but getting undefined value.
```
<input type="text" class="form-control" id="endereco" name="endereco" value="{{ $extratoSiacon['NOME-LOGRADOURO'] }}" @keydown="$event.keyCode === 13 ? $event.preventDefault() : false" @blur="saveItem(this.endereco.value())">
```
The function is as below:
```
saveItem(campo) {
                localStorage.setItem(campo, campo.value)
            }
```
I expect to record: key: endereco value: Some Street

Any help appreciated.
How do I tell vue that I intend to use the simple rendering in v-for?

I have a static array of 3 buttons that will never change while the component is active. How do I tell Vue to use the simple rendering method without it complaining about: component lists rendered with v-for should have explicit keys.

The Vue docs https://vuejs.org/v2/guide/list.html#key says:

It is recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.

My static array of static buttons should qualify for this "exception", how do I tell Vue this is the intention?

I don't want to have warnings in my code.

(SO question Console warning: component lists rendered with v-for should have explicit keys is the oposite of what I'm asking about.)
How to use slot-scope for index in for loop?
I'm using vue-datatable which has the following:
```
<slot v-for="(row, i) in processed_rows" :row="row" :columns="normalized_columns">
```
And I'm trying to get the index like this:
```
<template slot-scope="{ row, i }">
```
However, i always returns as undefined.
How to use react component in vue

I have a vue application & I want to use following React component in Vue application. How it should be done?

https://github.com/STRML/react-grid-layout

Reference Error : document is not defined in nativescript-vue

var elements = document.getElementsByClassName('active');
while(elements.length > 0){
    elements[0].classList.remove('active');
}
$event.target.classList.add('active');

It shows document not defined error

The vue routes are not working in chrome... works good in IE and firefox

The vue routes are not behaving normally in my chrome browser.. in IE and firefox it is working fine. In chrome the routes works once after loading and then stops responding... please find the code below.

The Main js file:

\\main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router.js";
import BootstrapVue from "bootstrap-vue";

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import axios from 'axios';

Vue.use(BootstrapVue);
Vue.use(axios);



Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

The router.js file:

import Vue from "vue";
import vueRouter from "vue-router";
//import home from "@/components/home";
//import Service from "@/components/service";

Vue.use(vueRouter);

export default new vueRouter({
    routes: [
        {
            path: "/home",
            name: "home"

        },

        {
            path: "/login",
            name: "login",
            component: () => import('./components/login.vue')
        },
        {
            path: "/register",
            name: "register",
            component: () => import('./components/register.vue')
        },
        {
            path: "/profile",
            name: "profile",
            component: () => import('./components/profile.vue')
        }

    ]
});

The App.vue file:

<template>
  <div id="app">
    <navbar></navbar>
    <logo></logo>
    <router-view></router-view>
  </div>
</template>

<script>
// import HelloWorld from "./components/HelloWorld.vue";
import navbar from "./components/navbar";
import logo from "./components/logo.vue";

export default {
  name: "app",
  components: {
    navbar,
    logo
  }
};
</script>

The navbar component:


  <div>
    <b-navbar toggleable="md" type="dark" class="bg-dark" variant="info">
      <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
      <router-link class="link" :to="{path: '/'}"><b-navbar-brand class="brand" href="#">{{brand}}</b-navbar-brand>
</router-link>

      <b-collapse is-nav id="nav_collapse">
        <b-navbar-nav>
          <router-link class="link" :to="{path: 'register'}">register</router-link>
          <router-link class="link" :to="{path: 'login'}">Login</router-link>
        </b-navbar-nav>

        <!-- Right aligned nav items -->
        <b-navbar-nav class="ml-auto">
          <b-nav-form>
            <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
            <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
          </b-nav-form>

          <b-nav-item-dropdown v-if="user" text="Lang" right>
            <b-dropdown-item href="#">EN</b-dropdown-item>
            <b-dropdown-item href="#">ES</b-dropdown-item>
            <b-dropdown-item href="#">RU</b-dropdown-item>
            <b-dropdown-item href="#">FA</b-dropdown-item>
          </b-nav-item-dropdown>

          <b-nav-item-dropdown v-if="user" right>
            <!-- Using button-content slot -->
            <template slot="button-content">
              <em>User</em>
            </template>
            <b-dropdown-item href="#">Profile</b-dropdown-item>
            <b-dropdown-item href="#">Signout</b-dropdown-item>
          </b-nav-item-dropdown>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>

    <!-- navbar-1.vue -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      brand: "inventrano",
      register: "register",
      login: "login",
      user: false
    };
  }
};
</script>

I am not able to figure out the root cause...

Vue router-view loading parents component instead of its own

I have a route configuration like this:

{
    path: '/',
    component: Dashboard,
    meta: { requiresAuth: true },
    children: [
        { path: 'home', components: { container: Home } },
        {
            path: 'post',
            components: { container: Post },
            children: [
                { path: 'add', components: { container: Add } }
            ]
        },
    ]
},

I have two <router-view>s, one is named container and the other is not named. I am expecting the Add component to be loaded into the container router-view when I visit /post/add . But it's loading the Post component. What am I missing?

EDIT:

Post.vue:

<template>
    <div>
        <p>I am <code>./views/post/Post.vue</code></p>
    </div>
</template>

Ho to define vue-router components inside a html?

I'm using django + vue.js + vue-router.js to make my project. I'm trying to use vue-router in a single html page. I searched for a while, all examples are use .vue components, or define the component templates in js part simpely, just like this:

<body>
    <div id="app">
        <div>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script>
        const Foo = { template: '<div>foo</div>' }
        const Bar = { template: '<div>bar</div>' }

        const routes = [
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar }
        ]

        const router = new VueRouter({
            routes
        })

        const app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>

What I want is define the template outside the js part something like this:

<body>
    <div id="app">
        <div>
            <router-link to="/foo">Go to Foo</router-link>
            <router-link to="/bar">Go to Bar</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

    <template id="Foo">
        <div>this is Foo</div>
    </template>
    <template id="Bar">
        <div>this is Bar</div>
    </template>

    <script>
        const Foo = { template: '#Foo' }
        const Bar = { template: '#Bar' }

        const routes = [
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar }
        ]

        const router = new VueRouter({
            routes
        })

        const app = new Vue({
            router
        }).$mount('#app')
    </script>
</body>

I tried this, but not work. So how to define vue-router components inside a html? I'm new with vue..

Related questions

Sending data using props in vue

See also questions close to this topic