Vue version

petite-vue 0.4.1

Link to minimal reproduction

https://jsfiddle.net/c2mnw0ey/

Steps to reproduce

Issues are not enabled for the petite-vue project so there is no way to file issues for that project.

While petite-vue looked promising at first, I found it a bit unreliable. Combining v-if and v-for on the same element did not work, so I had to wrap the element with v-for in another element with v-if.

<!-- Does not work -->
<div v-for="fruit in fruits" v-if="selected">
  <p>{{ fruit }}</p>
</div>

<!-- Works -->
<div v-if="selected">
  <div v-for="fruit in fruits">
    <p>{{ fruit }}</p>
  </div>
</div>

<!-- Does not work -->
<template v-if="selected">
  <div v-for="fruit in fruits">
    <p>{{ fruit }}</p>
  </div>
</template>

Also using v-if on a template element did not seem to work. <template v-if="selected"> did not work, but changing the template element to a div element made it work.

<input :value="input.value" :placeholder="input.placeholder"> resulted in <input value="undefined" placeholder="undefined">. I don't like this undefined values to be rendered, in Vue 3 I never had this problem.

What is expected?

I expect to be able to use v-if together with v-for in the same element. I expect to be able to use v-if with template elements too, not only div elements. I expect the attribute value and placeholder not to be set if the value is undefined.

What is actually happening?

The input gets rendered with attributes set with the literal value "undefined".

System Info

No response

Any additional comments?

No response

Hello, I went to check the petite-vue source code.

• template. Because it is not based on virtual DOM, the instructions of this library are based on DOM APIs such as el.parentElement, template is not a real dom node, so it cannot be used here
• v-for and v-if. Its instructions are independent. Both v-if and v-for have DOM operations, and mixed operations between the two will cause DOM nodes to be lost and an error will be reported. I can't mix it, which is difficult for me and makes the library more complicated.
• You can do this by assigning fruits to an empty array, but this requires maintaining two copies of the data
• Have you tried using class or style to accomplish this? I haven't tried this.

I think the documentation should mention gotchas such as v-if not working on template elements and that v-if and v-for cannot be used together on the same element.

I have not tried using a class or style to accomplish any of this.

The behavior of undefined properties on an object being rendered as the string "undefined" when model binding was unexpected to me.

I think the documentation should mention gotchas such as v-if not working on template elements and that v-if and v-for cannot be used together on the same element.

I have not tried using a class or style to accomplish any of this.

The behavior of undefined properties on an object being rendered as the string "undefined" when model binding was unexpected to me.

The official docs also have mentioned this here

I think the documentation should mention gotchas such as v-if not working on template elements and that v-if and v-for cannot be used together on the same element.

I have not tried using a class or style to accomplish any of this.

The behavior of undefined properties on an object being rendered as the string "undefined" when model binding was unexpected to me.

In the absence of a definition, value is undefined. In the real dom it will become value='undefined'. vue3 will process it during virtual DOM patching. Next Saturday I can try to fix that next week. But I'm not sure if there are other effects and if it can be merged into the main library.

Although vue3 allows users to set no data, I still think it is important to set the initial value.

@wsafight Did you ever get around to doing that?