Data Binding without Vue

Questions
1

I am new to Framework7 and have beginner level experience with Vue. I have just inherited a Framework7 project that is not integrated with Vue and we are not allowed to add Vue to this project. My hope is to find functionality that is native to Framework7 that resembles a few things that I know how to do in Vue: v-model, handlebar notation, and component data access.

I have created a simple code sandbox example that illustrates exactly what I’d like to be able to do in native Framework7, but my example depends on Vue:

I store data in the script area with the following code:

export default {
  name: "gs",
  data() {
    return {
      number: 7,
      message: "Hello, World!",
    };
  },

I can update my data from a method like this:

methods: {
  updateNumber() {
  this.$data.number = 777;
},

I can data bind form elements like this:

<f7-list-input
label=“Number”
type=“text”
placeholder=“Enter Number Here”
v-model:value=“number”

I can display data in handlebar notation like this:

The currnet number is: {{ number }}

Can you provide an example of how to do these things without adding Vue to Framework7? Thanks for your help!

2

if you want bare html with framework7 you need to read the core document of framework7:
Framework7 Core

3

Thanks, MiLaD_A. I’ve had some trouble finding what I’m looking for in that documentation. Could you point out where the documentation shows you how to setup the data section on a page? And then how to access that data? For example, to access a data element in vue I have to prefix the data elements with: “this.$data.”

4

In one of my non-vue Framework7 .html files, I have the following code which looks a lot like the data section of my vue code:

return {
data: function () {
return {
number: ‘seven’,
message: ‘Hello, world!’
}
},
}

Can I modify on one of these data elements from a JavaScript function? And if so, how? Is there something like “this.$data.” that needs to get prefixed?

5

I believe I’ve found some helpful example code from the kitchen sink:

6

heres a sandbox of bare html and f7 version of the code you wrote in vue : F7Core

1 Like
7

data and method function are replaced in v6 with new store, to achieve what you need read this section

or if you want to work with data and method function refer to v5 and older versions, heres a link to what you are looking for, but i highly suggest v6 store

1 Like
8

Thank you, MiLaD_A! That was a very generous answer with example code! :slight_smile: