question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Property mutation with simple components

See original GitHub issue

Vue.js version

2.0.0-rc.5

Reproduction Link

http://codepen.io/anon/pen/ORyJAa

Scenario

Most of our applications are build with a huge amount of backbone.js or marionette code. Especially for simple components like selects, search dropdowns or autogrowing textareas, the combination of our existing application stack and vuejs (1) components made ui development much more simple and consistent (and fun too).

For example: We’ve got complex form views (written in marionette), where you’ll find sth. like:

%form{ ... }
  %our-input-component{ name: 'title', value: @title, large: 'true' }

  %our-select{ name: 'gender', value: @gender }
    %our-select-item{ value: 'f' } female
    %our-select-item{ value: 'm' } male

By extending marionette just a little, it works pretty good currently. The marionette views are listening to the components to change (e.g. from the input or select) and then propagating those changes to models.

Problem

Now we’ve had a look on vuejs 2 (2.0.0-rc.4 and 2.0.0-rc.5).

Let’s take the select component example. The items were inserted through a slot. Clicking on an item will cause an event on the parent component. The select component manages it’s value based on those events.

With vuejs 2, can’t just change the value property due to the mutation warning:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

Question

Our implementations worked pretty much like polymer / webcomponents. With some marionette helpers, it was pretty simple to e.g. retrieve component attributes without knowing much internal stuff.

Now my question is, how those simple scenarios might be handled without maintaining some kind of global state or so?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
yyx990803commented, Sep 9, 2016

@wwlsascha the point is we don’t answer questions here - if we make an exception, then everyone will just start asking questions in issues.

0reactions
shllgcommented, Sep 9, 2016

@yyx990803 Just some minutes ago. But that’s not really the point. Can’t access the forum time to time and it’s hard to get help if not here…

Read more comments on GitHub >

github_iconTop Results From Across the Web

What Is Mutation Of Property And Why Is It Important For Buyers?
Mutation of property or land shows that a property has been transferred from one person to another, and it also assists authorities in...
Read more >
Mutation, Repair and Recombination - Genomes - NCBI - NIH
Point mutations are also called simple mutations or single-site mutations. They are sometimes described as substitution mutations but this risks confusion ...
Read more >
DNA Mutation and Repair
A mutation, which may arise during replication and/or recombination, is a permanent change in the nucleotide sequence of DNA. Damaged DNA can be...
Read more >
Mutations | Vuex
Vuex mutations are very similar to events: each mutation has a ... a mutation is by directly using an object that has a...
Read more >
Bind vuex state and mutations to checkbox component ...
The checkbox component has checked and onClick properties, which value are off course, could be dynamic. Component. Template in Pug language:
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found