vue-list | A solution to build an infinite load-more list component | Frontend Framework library

I am trying to add and remove items from list. I am able to animate the list but the container's height is not animating.

CodeSandbox

As you can see in the preview, the red container gets and lose height without transition.

How can I animate the height of the container as well when an item is added or deleted?

Regards

I wrote a small code with Laravel, Vue and JQuery, which works fine. Now I want to remove JQuery and run all with Vue and Axios.

Here's my template:

I'm a newbie of Vue, and I'm trying to simply clear the data of input component once I've submitted, but it seems I'm missing something, because since it's parent data is cleared, I still see the filled value of the input component.

Here is a living example.

I've set to the input child component v-model="title" from it's parent wrapper. Once I submit the data to the parent, I call addItem and in the end, I supposed to clear the data model just by clear it this.title = '', but I probably do something wrong on how to bind data from parent to child.

And above the code, starting from the parent component:

I have a wrapper component which provides the children with API calls and stores the result, and a list component which shows the requested items passed via prop. The problem is that it shows them in development mode but doesn't in production though API call is ok in both cases and the response is correct.

Both modes I ran in the same environment. Looks like a reactivity issue.

This is a template code:

I like Vue and often use it to list options in a select box, (or sometimes divs in a flexbox). I'm wondering if there is a way to split a piece out of a for-loop during a Vue list rendering. Like this scenario:

I have 3 options:

• Option 1 - Blue
• Option 2 - Green
• Option 3 - Purple

I want to render these in a select box AND in a div below the select box, depending on which option is selected, a different div (with the color of the selected option in this example).

Is there a way to do this inside a Vue-list rendering?

Something like

I installed vue-cli globally with yarn, but vue is giving a "command not found" error. Why did this happen, and how do I fix this?

Some interesting debug info:

I am making a multi-step form in Rails 5 with Vue.js. I noticed that when a v-if is re-evaluated, the text in the input field gets cleared out. Is there a way to persist the info through the form steps and through other v-if evaluations?

Here's what my form looks like:

I'm trying to make a simple multi-step form for my Rails 5 app using Vue.js. It's my first time using Vue so I am a bit stuck on how to make things work properly.

Right now I am trying to do the following:

1. Click a Next button and set the li elements from step 1 to step N to have a class active.
2. Click a Previous button and remove class active from step N.

Quite simple. Here's what I've got so far but I don't know where to go from here:

Currently, when I have a v-for loop like this: