foreach item like button (access to variable through struct )(SwiftUI) - swift

Question

I am developing MVVM app and I have two views and view model for one of them. One view for forEach cell, and another for forEach. So i want to implement like button in "cell" view, and i have no idea how to do it, because i cant edit data from cellView. Here is my code:
TownsListView.swift
struct TownsListView: View {
#StateObject private var viewModel = TownsViewModel()
var body: some View {
ScrollView() {
ForEach(viewModel.towns) { town in
TownView(name: town.name)
.padding(.bottom)
.frame(width: 300, height: 40, alignment: .center)
.background(Color.yellow)
}
}
.onAppear {
viewModel.getTowns()
}
}
}
TownView.swift
struct TownView : View {
var name: String
#StateObject var viewModel = TownViewModel()
var body : some View {
HStack {
Text(self.name)
Spacer()
Button(action: {/* viewModel.setLike */}) {
Image(systemName: "heart")
}
}
}
}
TownsViewModel.swift
class TownsViewModel : ObservableObject {
#Published var towns = [Town]()
func getTowns() {
for town in townsArray {
towns.append(town)
}
}
}
TownViewModel.swift
class TownViewModel : ObservableObject {
func setLike() {
//Here i want to implement like function
}
}
and Model.swift
struct Town : Identifiable {
var id : String = UUID().uuidString
var name : String
var liked : Bool
}
var paris = Town(name: "Paris", liked: false)
var london = Town(name: "London", liked: false)
var barcelona = Town(name: "Barcelona", liked: false)
var tokyo = Town(name: "Tokyo", liked: false)
let townsArray = [paris,london,barcelona,tokyo]
How to implement like function for toggle liked property of Town?

Answer 1

Here's how I would handle this:
struct TownsListView: View {
#StateObject private var viewModel = TownsViewModel()
var body: some View {
ScrollView() {
ForEach(viewModel.towns) { town in
TownView(town: viewModel.bindingForTown(id: town.id))
.padding(.bottom)
.frame(width: 300, height: 40, alignment: .center)
.background(Color.yellow)
}
}
.onAppear {
viewModel.getTowns()
}
}
}
struct TownView : View {
#Binding var town: Town
var body : some View {
HStack {
Text(town.name)
Spacer()
Button(action: {
town.liked.toggle()
}) {
Image(systemName: "heart")
}.foregroundColor(town.liked ? .red : .black)
}
}
}
class TownsViewModel : ObservableObject {
#Published var towns : [Town] = []
func bindingForTown(id: String) -> Binding<Town> {
.init {
self.towns.first { $0.id == id }!
} set: { newValue in
self.towns = self.towns.map { $0.id == newValue.id ? newValue : $0 }
}
}
func getTowns() {
towns = townsArray
}
}
This uses a custom binding to pass down to the TownView. If you can use Swift 5.5, this gets even easier and you can use ForEach with an automatic binding:
struct TownsListView: View {
#StateObject private var viewModel = TownsViewModel()
var body: some View {
ScrollView() {
ForEach($viewModel.towns) { $town in
TownView(town: $town)
.padding(.bottom)
.frame(width: 300, height: 40, alignment: .center)
.background(Color.yellow)
}
}
.onAppear {
viewModel.getTowns()
}
}
}

Answer 2

You were overthinking this. Your model needs to provide the state of the app, not a function to change the state. Your views take that state and update them. I simply pulled your function stub out of class TownViewModel and added a bool like. In your view, all you need to do is have change the bool in the TownView button and you will change the state and have a record of it.
Model:
class TownViewModel : ObservableObject {
#Published var like: Bool = false
}
View:
struct TownView: View {
var name: String
#StateObject var viewModel = TownViewModel()
var body : some View {
HStack {
Text(self.name)
Spacer()
Button(action: {
viewModel.like.toggle() // Changes the "like" state
}) {
Image(systemName: (viewModel.like ? "heart.fill" : "heart")) // This is a simple
// tertiary operator that takes the current value of the "like" and changes the heart to match.
}
}
}
}